Merge pull request #45 from ojvribeiro/feat-head-management

feat(core): head management
ojvribeiro · Sep 28, 2022 · 469eb94 · 469eb94 · vercel · Sep 28, 2022
2 parents 61f08f1 + 297ea40
commit 469eb94
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 5 deletions.
diff --git a/.vulmix/components/Head.vue b/.vulmix/components/Head.vue
@@ -0,0 +1,9 @@
+<template>
+  <Head>
+    <slot />
+  </Head>
+</template>
+
+<script setup>
+  import { Head } from '@vueuse/head'
+</script>
diff --git a/.vulmix/index.ejs b/.vulmix/index.ejs
@@ -5,11 +5,6 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <!-- Primary Meta Tags -->
-    <title>Vue 3 + Laravel Mix = Vulmix</title>
-    <meta name="title" content="Your application title">
-    <meta name="description" content="Your application description">
-
     <link rel="stylesheet" href="<%= mix('/assets/_vulmix/css/main.vulmix.css') %>">
     <link rel="stylesheet" href="<%= mix('/assets/css/main.css') %>">
 

diff --git a/.vulmix/main.js b/.vulmix/main.js
@@ -1,9 +1,11 @@
 import { createApp } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
+import { createHead } from '@vueuse/head'
 
 import App from '../app.vue'
 
 const app = createApp(App)
+const head = createHead()
 
 app.component('App', require('@/App.vue').default)
 
@@ -83,5 +85,6 @@ const router = createRouter({
 })
 
 app.use(router)
+app.use(head)
 
 app.mount('#app')
diff --git a/.vulmix/pages/404.vue b/.vulmix/pages/404.vue
@@ -1,4 +1,10 @@
 <template>
+  <Head>
+    <title>
+      Page not found
+    </title>
+  </Head>
+
   <div class="grid place-items-center h-full text-center bg-zinc-800">
     <div class="space-y-4">
       <h1 class="text-8xl text-blue-200 font-black">404</h1>

diff --git a/app.vue b/app.vue
@@ -1,3 +1,12 @@
 <template>
+  <Head>
+    <title>
+      Vue + Laravel Mix = Vulmix
+    </title>
+
+    <meta name="title" content="Your application title">
+    <meta name="description" content="Your application description">
+  </Head>
+
   <App />
 </template>
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
   "devDependencies": {
     "@vue/compiler-sfc": "^3.2.37",
     "@vueuse/core": "^9.2.0",
+    "@vueuse/head": "^0.7.12",
     "autoprefixer": "^10.4.8",
     "browser-sync": "^2.27.10",
     "browser-sync-webpack-plugin": "^2.3.0",

diff --git a/pages/test-page.vue b/pages/test-page.vue
@@ -1,4 +1,10 @@
 <template>
+  <Head>
+    <title>
+      Test page
+    </title>
+  </Head>
+
   <div class="grid place-items-center h-full text-center bg-zinc-800 text-white">
     <div class="space-y-4">
       <h1 class="text-5xl text-blue-200 font-black">Test page!</h1>