Creating Custom Layers

Build Your Own UI Template

Follow these steps to create a custom UI template layer:

1. Create new template directory

mkdir ui-templates/template-custom
cd ui-templates/template-custom

2. Create the layer structure

mkdir -p app/{components,layouts,pages,assets}

3. Create nuxt.config.ts

export default defineNuxtConfig({
  components: [
    { path: './app/components/common', pathPrefix: false },
    './app/components',
  ],
  css: ['./app/assets/css/main.css'],
  i18n: {
    defaultLocale: 'en',
    locales: [{ code: 'en', file: 'en.json' }],
  },
})

4. Update main nuxt.config.ts

export default defineNuxtConfig({
  extends: [
    ['github:Pyango/nuxt-core#v1.7.4', { install: true }],
    ['./ui-templates/template-custom']
  ]
})