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.