Vida Comments - Answer Overflow

Vida

•Created by vinum on 5/29/2024 in #❓・help

Nuxt layer component prefix

If you want all components in that layer to be prefixed with 'VD' then you would do something like this in your nuxt config:

export default defineNuxtConfig({
    components: [ { path: "@/path_to_your_layer/components/", prefix: "VD", pathPrefix: false }]
})

export default defineNuxtConfig({
    components: [ { path: "@/path_to_your_layer/components/", prefix: "VD", pathPrefix: false }]
})

With this you can put any components inside the layers components folder and when using those components you have to prefix them with VD. Notice the 'pathPrefix: false' is optional, the default behaviour being true. If its false you can structure your folders in any way you want inside that layer. If you want to structure them the default way you remove that option. Another example would be :

export default defineNuxtConfig({
    components: [{ path: "@/path_to_your_layer/components/" }, { path: "@/path_to_your_layer/components/vd_components", prefix: "VD", pathPrefix: false }]
})

export default defineNuxtConfig({
    components: [{ path: "@/path_to_your_layer/components/" }, { path: "@/path_to_your_layer/components/vd_components", prefix: "VD", pathPrefix: false }]
})

This way we can have prefixed only the components we have in vd_components and the components folder behaves defaultly. Hope it helps

2 replies

NNuxt

•Created by Ozai on 5/24/2024 in #❓・help

Nested duplicated component

The problem in your code is that app.vue has duplicate templates:

<template> <<<<<<<<<<<<<<<<<<<<<< THIS IS ENOUGH
  <template> <<<<<<<<<<<<<<<<<<<<<< DUPLICATE
    <NuxtPage />
  </template> <<<<<<<<<<<<<<<<<<<<<< DUPLICATE
</template> <<<<<<<<<<<<<<<<<<<<<< THIS IS ENOUGH
<script setup lang="ts"></script>
<style scoped>
html {
  font-size: 16px;
}
</style>

<template> <<<<<<<<<<<<<<<<<<<<<< THIS IS ENOUGH
  <template> <<<<<<<<<<<<<<<<<<<<<< DUPLICATE
    <NuxtPage />
  </template> <<<<<<<<<<<<<<<<<<<<<< DUPLICATE
</template> <<<<<<<<<<<<<<<<<<<<<< THIS IS ENOUGH
<script setup lang="ts"></script>
<style scoped>
html {
  font-size: 16px;
}
</style>

After removing that your application sould render only one NavBar. I also noticed in your page Info.vue you attempt to import the navbar. In these new nuxt versions there is no need to import. Components are auto imported so its enough if you reduce the code to :

<template lang="html">
  <NavBar />
</template>

<template lang="html">
  <NavBar />
</template>

3 replies

Gaming

Programming