Creating Custom Layers
=====================

Build Your Own UI Template
--------------------------

Follow these steps to create a custom UI template layer:

1. **Create new template directory**

.. code-block:: bash

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

2. **Create the layer structure**

.. code-block:: bash

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

3. **Create nuxt.config.ts**

.. code-block:: typescript

   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**

.. code-block:: typescript

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