SR
Click to open github profile

Use Craft CMS Query Builder in Vue

With the Vue Craft CMS module, you can easily integrate Craft CMS and leverage the Craft Query Builder in your Vue projects.

Features

  • Craft CMS query url builder: Easily build urls for the Craft Query API plugin directly from Vue, enabling flexible, real-time data retrieval from Craft CMS
  • Built in Helper Components: Connect your data directly with your Vue components, to speed up development.
  • Get Only the Data You Need: Avoid overfetching by using a custom function in the query builder to select only the fields you require.
  • Pretty Json: Json Transformer are in place to prettify the response.
  • Support for main Element Types: Query addresses, assets, entries and users.

Examples

Want to see how it works?

app.vue
const queryUrl = useCraftUrlBuilder('entries')
  .id(1)
  .status('active')
  .siteId(1)
  .buildUrl('one')

It is as simple as that. 🚀 The response will be the url that you can use to fetch your data.

Further Resources

  • Craft Query API: A Craft CMS Plugin, that powers this great stuff.
  • Nuxt Craft CMS: A package to use the query builder in Nuxt.
  • Js Craft CMS API: The core package, you can build wrappers around it to support your framework. If you want to build a wrapper around it for your framework -> Hit me up :)

Copyright © 2024 Samuel Reichör