Examples

Playground

Get a quick overview by exploring the playground in the library.

Multisite Example

Adding Multisites

First, ensure that you have defined your multisite configuration in nuxt.config.ts:

export default defineNuxtConfig({
  craftcms: {
    baseUrl: 'https://example.ddev.site',
    authToken: 'owiwrtgnfsjhsadgsdagf',
    siteMap: [
      {
        handle: 'en',
        origin: 'http://localhost:3000',
        id: 1,
      },
      {
        handle: 'de',
        origin: 'http://localhost:3000/de',
        id: 2,
      },
    ],
  }
});

Once configured, you can use the useCraftFullUrl and useCraftCurrentSite composables to query your data.

Querying Data

In your catch-all route ([...slug].vue), you can retrieve the relevant data using the provided composables.

Here’s an example:

const uri = useCraftUri();
const currentSite = useCraftCurrentSite();
const { data, error } = await useCraftQuery('entries')
  .uri(uri.value)
  .site(currentSite.value.handle)
  .one();

if (error.value) {
  console.error(error.value);
}

This approach ensures that your queries are multisite-aware, dynamically resolving the correct URI and site handle based on the current request. 🚀

Full Example

For a complete setup, check out the full example here. This monorepo includes a Craft and Nuxt setup where you can test around locally.

Clone Repo:

git clone git@github.com:samuelreichor/craft-nuxt-starter.git