Add multi layout

.gitignore

@@ -6,6 +6,7 @@ dist-ssr
 /pages
 /components
 /panels
+/layouts
 public
 README.md
 *.local

README.markdown

@@ -209,6 +209,53 @@ export default {
 }
 ```
 
+### Customizing the Layout
+
+The application comes with a default layout that includes a header and a footer. If you'd like to replace this layout with your own, you can do so by creating a custom layout file.
+
+Steps to replace the default layout
+
+1. In the root folder of your project, create a new folder called `layouts` (if it doesn't already exist).
+2. Inside this folder, create a file named default.vue.
+3. Define your custom layout structure inside this file as needed.
+
+Example of layout/default.vue
+
+```vuejs
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
+```
+
+This custom layout will replace the default one and be applied throughout the application. You can include your own elements, such as a navigation bar or footer, as needed.
+
+#### Using Multiple Layouts
+
+In addition to replacing the default layout, you can create multiple layouts by adding more .vue files inside the layout folder. You can then specify which layout to use for a specific page by setting the layout name in the meta property of the `<route>` tag in your Single File Component (SFC).
+
+JSON5:
+
+```js
+<route>
+{
+  meta: {
+    layout: 'custom'
+  }
+}
+</route>
+```
+
+YAML:
+
+```yaml
+<route lang="yaml">
+meta:
+  layout: custom
+</route>
+```
+
 ### External panels
 
 To add panels in Taxa pages, create a folder called `panels` in your `setup` branch, and inside it create another folder for your panel. For example: `panels/PanelTest`

src/App.vue

@@ -1,13 +1,31 @@
 <template>
-  <ApplicationLayout>
+  <component :is="currentLayout">
     <router-view />
-  </ApplicationLayout>
+  </component>
 </template>
 
 <script setup>
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
 import { useHead } from 'unhead'
+import { loadUserLayouts } from './utils'
 import ApplicationLayout from '@/layout/Application.vue'
 
+const DEFAULT_LAYOUT = 'defaultLayout'
+
+const route = useRoute()
+const userLayouts = loadUserLayouts()
+const routeLayout = route.meta?.layout
+
+const currentLayout = computed(() => {
+  const layouts = {
+    [DEFAULT_LAYOUT]: ApplicationLayout,
+    ...userLayouts
+  }
+
+  return layouts[route.meta?.layout || DEFAULT_LAYOUT] || ApplicationLayout
+})
+
 useHead({
   title: __APP_ENV__.project_name,
   meta: __APP_ENV__.metadata

src/utils/index.js

@@ -1,3 +1,4 @@
 export * from './color'
 export * from './request'
 export * from './strings'
+export * from './loadLayouts'

src/utils/loadLayouts.js

@@ -0,0 +1,21 @@
+export function loadUserLayouts() {
+  const files = import.meta.glob('#/layouts/*.vue', {
+    eager: true,
+    import: 'default'
+  })
+
+  return makeLayoutObject(files)
+}
+
+function makeLayoutObject(files) {
+  const components = Object.entries(files)
+  const layouts = {}
+
+  components.forEach(([path, component]) => {
+    const layoutName = path.split('/').pop().replace('.vue', '')
+
+    Object.assign(layouts, { [layoutName]: component })
+  })
+
+  return layouts
+}

tailwind.config.cjs

@@ -12,6 +12,7 @@ module.exports = {
     './index.html',
     './vite.config.js',
     './src/**/*.{vue,js,ts,jsx,tsx,md}',
+    './layouts/**/*.{vue,js}',
     './pages/**/*.{vue,md}',
     './panels/**/*.{vue,md}',
     './components/**/*.{vue,md}',

vite.config.js

@@ -54,7 +54,7 @@ export default () => {
 
       Pages({
         dirs: 'pages',
-        exclude: ['**/components/*.vue'],
+        exclude: ['**/components/*.vue', 'components/**/*.vue'],
         extensions: ['vue', 'md'],
         extendRoute(route) {
           if (route.path === '/home') {