N
Nuxt•2mo ago
Drom

How to set Prefix for Components Extended from Git Repo

I am trying to set a prefix for the components I get from the git repo on extends. But I can't get it sorted. This is my main app nuxt config 
import { createResolver } from 'nuxt/kit';

const { resolve } = createResolver(import.meta.url);

export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4,
  },
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },

  extends: [
    [
      'github:user/groot-layer',
      {
        meta: { name: '@layer-app' },
        auth: process.env.GITHUB_TOKEN,
      },
    ],
  ],
  alias: {
    '@main-app': resolve('./'),
  },
  ssr: false,
  modules: ['@pinia/nuxt'],
});
import { createResolver } from 'nuxt/kit';

const { resolve } = createResolver(import.meta.url);

export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4,
  },
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },

  extends: [
    [
      'github:user/groot-layer',
      {
        meta: { name: '@layer-app' },
        auth: process.env.GITHUB_TOKEN,
      },
    ],
  ],
  alias: {
    '@main-app': resolve('./'),
  },
  ssr: false,
  modules: ['@pinia/nuxt'],
});
This is my user/groot-layer nuxt config 
export default defineNuxtConfig({

  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  future: {
    compatibilityVersion: 4
  },
  modules: ['@pinia/nuxt'],
  $meta:{
    name:'layer-app',
  },
  ssr:false,
  alias: {
    '@layer-app': resolve('./'),
  },

})
export default defineNuxtConfig({

  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  future: {
    compatibilityVersion: 4
  },
  modules: ['@pinia/nuxt'],
  $meta:{
    name:'layer-app',
  },
  ssr:false,
  alias: {
    '@layer-app': resolve('./'),
  },

})
I want to set a prefix "groot" for the components that I get from the layer app. So it will be unique
3 Replies
kapa.ai
kapa.ai•2mo ago
Hi @Drom. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To set a prefix for components extended from a Git repository layer in Nuxt, you need to configure the components option in your Nuxt configuration. Based on the knowledge sources, here's how you can add a prefix to components from your layer: Solution You need to modify your main app's nuxt.config.ts to specify the components configuration with a prefix for your layer: 
import { createResolver } from 'nuxt/kit';

const { resolve } = createResolver(import.meta.url);

export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4,
  },
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },

  extends: [
    [
      'github:user/groot-layer',
      {
        meta: { name: '@layer-app' },
        auth: process.env.GITHUB_TOKEN,
      },
    ],
  ],
  alias: {
    '@main-app': resolve('./'),
  },
  components: [
    // Add prefix 'Groot' to components from the layer
    { 
      path: '#layers/layer-app/components',
      prefix: 'Groot'
    },
    // Your main app components (keep this to maintain your local components)
    '~/components'
  ],
  ssr: false,
  modules: ['@pinia/nuxt'],
});
import { createResolver } from 'nuxt/kit';

const { resolve } = createResolver(import.meta.url);

export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4,
  },
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },

  extends: [
    [
      'github:user/groot-layer',
      {
        meta: { name: '@layer-app' },
        auth: process.env.GITHUB_TOKEN,
      },
    ],
  ],
  alias: {
    '@main-app': resolve('./'),
  },
  components: [
    // Add prefix 'Groot' to components from the layer
    { 
      path: '#layers/layer-app/components',
      prefix: 'Groot'
    },
    // Your main app components (keep this to maintain your local components)
    '~/components'
  ],
  ssr: false,
  modules: ['@pinia/nuxt'],
});
This configuration uses the #layers/layer-app alias that was created based on the $meta.name property in your layer's configuration. The prefix: 'Groot' option will ensure all components from that layer will be prefixed with "Groot". For example, if your layer has a component called Button.vue, it will be available in your main app as <GrootButton />. How it works Nuxt's component auto-import system allows you to customize how components are registered using the components configuration option as documented here. The prefix property specifically lets you add a prefix to all components from a specific directory. The #layers/layer-app path works because Nuxt automatically creates named layer aliases for your extended layers, which was introduced in Nuxt v3.16.0 as mentioned in the documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@1153996354587201637> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Drom
DromOP•2mo ago
@kapa.ai Your solution didn't work 'LayerComponent': typeof import("../node_modules/.c12/github_user_NoJ3A6YvBJ/app/components/LayerComponent.vue")['default'] Groot prefix has not been added to it. This is what it shows in the components.d.ts inside the .nuxt directory after running the main app with npm run dev.

Did you find this page helpful?