Merge pull request #50 from ojvribeiro/feate-page-layouts

feat(core): support for multiple layouts

.vulmix/components/Layout.vue

@@ -0,0 +1,14 @@
+<template>
+  <component :is="`layout-${name}`">
+    <slot />
+  </component>
+</template>
+
+<script setup>
+  defineProps({
+    name: {
+      type: String,
+      default: 'default',
+    },
+  })
+</script>

.vulmix/main.js

@@ -91,6 +91,27 @@ const router = createRouter({
   routes: routes,
 })
 
+
+/**
+ * Layouts
+ */
+const layoutFiles = require.context('@layouts/', true, /\.(vue|js)$/i)
+
+layoutFiles
+  .keys()
+  .map(key => {
+    const layoutName =
+      'layout-' +
+      key
+        .split('.')[1]
+        .replace(/\//g, '')
+        .replace(/([A-Z])/g, '-$1')
+        .replace(/(^-)/g, '')
+        .toLowerCase()
+
+    app.component(layoutName, layoutFiles(key).default)
+  })
+
 app.use(router)
 app.use(head)
 

.vulmix/mix.js

@@ -23,6 +23,7 @@ class VulmixInit {
             '@assets': path.resolve(__dirname, '../assets'),
             '@components': path.resolve(__dirname, '../components'),
             '@composables': path.resolve(__dirname, '../composables'),
+            '@layouts': path.resolve(__dirname, '../layouts'),
             '@pages': path.resolve(__dirname, '../pages'),
             '@sass': path.resolve(__dirname, '../assets/sass'),
           },

layouts/default.vue

@@ -0,0 +1,5 @@
+<template>
+  <!-- Put your layout around the slot tag -->
+  <slot />
+  <!-- Put your layout around the slot tag -->
+</template>

tailwind.config.js

@@ -1,11 +1,13 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './index.html',
-    './.vulmix/**/pages/*.{vue,html,js}',
-    './.vulmix/**/components/*.{vue,html,js}',
-    './pages/*.{vue,html,js}',
-    './components/*.{vue,html,js}',
+    './app.vue',
+    './.vulmix/**/pages/*.{vue,js}',
+    './.vulmix/**/components/*.{vue,js}',
+    './.vulmix/**/layouts/*.{vue,js}',
+    './pages/*.{vue,js}',
+    './components/*.{vue,js}',
+    './layouts/*.{vue,js}',
   ],
   theme: {
     extend: {},