SR
Click to open github profile
Composables

useCraftUri

Learn how to use the useCraftUri composable.


This composable provides an easy way to retrieve the current URI based on the defined siteMap within the nuxt.config.ts. It enhances multisite support and simplifies querying data from your Craft CMS backend.

Usage

const uri = useCraftUri();

By default it returns the uri based on the path defined in the siteMap property in your nuxt.config.ts. You can change this behavior by changing the siteDetectionMode to origin. You can read more about that in the install docs.

siteDetectionMode: path

// Url: http://localhost:3000/de/happy-trying
//
// Nuxt Config:
//  craftcms: {
//    baseUrl: 'https://cms.ddev.site',
//    authToken: 'xxxx',
//    siteDetectionMode: 'path',
//    siteMap: [
//      {
//        handle: 'en',
//        origin: 'http://localhost:3000',
//        path: '/',
//      },
//      {
//        handle: 'de',
//        origin: 'http://localhost:3000',
//        path: '/de',
//      }
//    ],
//  },
const uri = useCraftUri();

// uri.value will result in: "happy-trying"

siteDetectionMode: origin

// Url: https://en-site.ddev.site/happy-trying
//
// Nuxt Config:
//  craftcms: {
//    baseUrl: 'https://cms.ddev.site',
//    authToken: 'xxxx',
//    siteDetectionMode: 'origin', 
//    siteMap: [
//      {
//        handle: 'en',
//        origin: 'https://en-site.ddev.site',
//        path: '/',
//      },
//      {
//        handle: 'en',
//        origin: 'https://de-site.ddev.site',
//        path: '/',
//      }
//    ],
//  },

const uri = useCraftUri();

// uri.value will result in: "happy-trying"
Note

To use this composable, you have to define your sites in the siteMap property in the nuxt.config.ts.

Type

function useCraftCurrentSite(): ComputedRef<string>;

Copyright © 2025 Samuel Reichör