Composables

useCraftUrlBuilder

Learn how to use the useCraftUrlBuilder composable.

This composable provides a simple way to build urls to query from your Craft CMS Backend. It leverages js-craftcms-api to build query URLs.

Element Types

<script setup lang="ts">
  // url for addresses query
  const url = useCraftUrlBuilder('addresses').id(1).buildUrl('one')

  // url for assets query
  const url = useCraftUrlBuilder('assets').id(1).buildUrl('one')

  // url for entry query
  const url = useCraftUrlBuilder('entries').id(1).buildUrl('one')

  // url for users query
  const url = useCraftUrlBuilder('users').id(1).buildUrl('one')
</script>

Generate URL

By using the one or the all as function parameters of the buildUrl() method you can build the url.

const query = useCraftUrlBuilder('entries').section('news')

// Generates a url to fetch one entry
const url = query.buildUrl('one')

// Generates a url to fetch all entries
const url = query.buildUrl('all')

Available Methods

useCraftUrlBuilder supports all methods from js-craftcms-api.

Note

For the full list of available methods, see the documentation here.

In addition, the following Vue-specific methods are available:

Method	Description	Type
`buildUrl`	Generate an url	`one` or `all`

Example

const url = useCraftUrlBuilder('entries')
  .section('news')
  .fields(['title'])
  .limit(3)
  .buildUrl('all')

Example

Learn how to use the Vue Craft CMS module through an example.

CraftPage

Learn how to use the CraftPage component.