Quick Start

This page will walk you through setting up requery-js locally or via the CDN.

Written By Joel

Last updated About 1 month ago


Try requery-js online

  • Clone the Webflow starter here.

  • If you want a more traditional development setup, you can try requery-js in a Node.js environment within your browser using StackBlitz.

Installing requery-js (Locally)

Prerequisites

  • Familiar with the command line

  • Node.js version 20.x or higher

  • Vite Project (Recommended)

Open your terminal in your project directory and run:

npm install requery-js

Using requery-js from CDN

You can use requery-js directly from a CDN (via native ES modules)

<script type="module">
  import {
    defineComponent
  } from 'https://esm.run/requery-js@0.2'

  defineComponent("rq-counter", {
    props: {
      max: 10
    },
    store: {
      count: 0
    },
    setup(component, props, store, actions) {
      // Bind count value to <span>
      component.query("count").text(() => store.count);

      // Resister click event and bind the disabled attribute
      component
        .query('button')
        .bind('disabled', () => store.count === props.max)
        .on('click', (evt) => {
          if (store.count < props.max) {
            store.count += 1;
          }
        });
    }
  });
</script>

Notice that we are using <script type="module">

Using requery-js with Slater

When using requery-js with Slater.app you must import the Slater script with the type=”module” .

Here is an example of adding the slater script to a Webflow project (BODY).

<script type="module" src="https://slater.app/11568/27362.js"></script>

Here is the counter component definition in Slater.

import {
  defineComponent
} from 'https://esm.run/requery-js@0.2'

defineComponent('rq-counter', {
  props: {
    max: 10,
  },
  store: {
    count: 0,
  },
  setup(component, props, store) {
    // Bind count value to <span>
    component.query('count').text(() => store.count);

    // Resister click event and bind the disabled attribute
    component
      .query('button')
      .bind('disabled', () => store.count === props.max)
      .on('click', (evt) => {
        if (store.count < props.max) {
          store.count += 1;
        }
      });
  },
});

Could not load article.

Could not load article.