mirrors/vue-meta
2
0
Fork 0
mirror of https://github.com/tenrok/vue-meta.git synced 2026-06-25 13:50:34 +03:00
Code Activity

initial work on v3

Browse Source
This commit is contained in:
pimlie
2020-04-25 12:32:57 +02:00
parent 6d25ff2f37
commit 41c7561bf9
5 changed files with 129 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/next/index.js
+60 -1
View File
@@ -1,4 +1,63 @@
import { markRaw, reactive, computed, onMounted } from 'vue'
export default { const apps = {}
export function createMeta () {
const id = Symbol()
const Meta = {
id,
install(app) {
let watchersAdded = false
app.mixin({
created() {
if (this === this.$root) {
watchersAdded = true
}
if (!this.metaData) {
return
}
let depth = 0
let parent = this
while (parent) {
parent = parent.$parent
depth++
if (parent === this.$root) {
break
}
}
const __meta = markRaw({
depth
})
console.log('CREATED', this, this.metaData, depth)
}
})
app.config.globalProperties.$meta = this
}
}
apps[id] = Meta
return Meta
}
export function useMeta () {
onMounted(vmMounted)
const metaData = reactive([])
console.log(this)
return metaData
}
function vmMounted() {
console.log('MOUNTED', this, arguments)
} }
examples/package.json
+1 -1
View File
@@ -23,7 +23,7 @@
"@babel/core": "^7.9.0", "@babel/core": "^7.9.0",
"@babel/node": "^7.8.7", "@babel/node": "^7.8.7",
"@babel/plugin-syntax-dynamic-import": "^7.8.3", "@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/preset-env": "^7.9.0", "@babel/preset-env": "^7.9.5",
"@vue/compiler-sfc": "^3.0.0-alpha.10", "@vue/compiler-sfc": "^3.0.0-alpha.10",
"@vue/server-renderer": "^3.0.0-alpha.10", "@vue/server-renderer": "^3.0.0-alpha.10",
"babel-loader": "^8.1.0", "babel-loader": "^8.1.0",
examples/vue-router/about.vue
+1 -1
View File
@@ -22,7 +22,7 @@ export default {
onMounted(() => console.log(route)) onMounted(() => console.log(route))
return { metaUpdated, page: route.value.name } return { metaUpdated, page: route.name }
} }
} }
</script> </script>
examples/vue-router/app.js
+49 -5
View File
@@ -1,21 +1,30 @@
import { createApp, defineComponent, reactive, toRefs, h } from 'vue' import { createApp, defineComponent, reactive, toRefs, h, onMounted } from 'vue'
import VueMeta from 'vue-meta' import VueMeta from 'vue-meta'
import { createRouter, createWebHistory } from 'vue-router' import { createRouter, createWebHistory } from 'vue-router'
import About from './about.vue' import About from './about.vue'
import { createMeta, useMeta } from '../next'
/*Vue.use(VueMeta, { /*Vue.use(VueMeta, {
refreshOnceOnNavigation: true refreshOnceOnNavigation: true
})*/ })*/
const meta = createMeta({
})
let metaUpdated = 'no' let metaUpdated = 'no'
const ChildComponent = defineComponent({ const ChildComponent = defineComponent({
name: 'child-component', name: 'child-component',
props: { props: {
page: String page: String
}, },
template: `<div> template: `
<h3>You're looking at the <strong>{{ page }}</strong> page</h3> <metainfo>
<p>Has metaInfo been updated due to navigation? {{ metaUpdated }}</p> <title>Another Title</title>
</metainfo>
<div>
<h3>You're looking at the <strong>{{ page }}</strong> page</h3>
<p>Has metaInfo been updated due to navigation? {{ metaUpdated }}</p>
</div>`, </div>`,
metaInfo () { metaInfo () {
return { return {
@@ -28,13 +37,26 @@ const ChildComponent = defineComponent({
} }
} }
}, },
created () {
console.log(this)
},
setup () { setup () {
const metaData = useMeta({
})
const state = reactive({ const state = reactive({
date: null, date: null,
metaUpdated metaUpdated
}) })
onMounted(function vmMounted() {
console.log('MOUNTED', this, arguments)
})
return { return {
metaData,
...toRefs(state) ...toRefs(state)
} }
}, },
@@ -68,8 +90,29 @@ const router = createRouter({
] ]
}) })
const Metadata = {
template: `
<teleport to="head">
<slot />
</teleport>
<teleport to="body">
<slot name="body" />
</teleport>
`
}
const App = { const App = {
template: ` template: `
<metainfo>
<title>My Title</title>
<meta name="charset" content="utf8" />
<template v-slot:body>
<script>var a = 1</script>
</template>
</metainfo>
<div id="app"> <div id="app">
<h1>vue-router</h1> <h1>vue-router</h1>
<router-link to="/">Home</router-link> <router-link to="/">Home</router-link>
@@ -83,8 +126,9 @@ const App = {
} }
const app = createApp(App) const app = createApp(App)
app.component('metainfo', Metadata)
app.use(router) app.use(router)
app.use(meta)
/* /*
const { set, remove } = app.$meta().addApp('custom') const { set, remove } = app.$meta().addApp('custom')
examples/vue-router/index.html
+18 -12
View File
@@ -1,13 +1,19 @@
<!DOCTYPE html> <!DOCTYPE html>
<link rel="stylesheet" href="/global.css"> <html>
<a href="/">&larr; Examples index</a> <head>
<div id="app"></div> <link rel="stylesheet" href="/global.css">
<script src="/__build__/vue-router.js"></script> <style>
<style> .page-enter-active, .page-leave-active {
.page-enter-active, .page-leave-active { transition: opacity .5s
transition: opacity .5s }
} .page-enter, .page-leave-to {
.page-enter, .page-leave-to { opacity: 0
opacity: 0 }
} </style>
</style> </head>
<body>
<a href="/">&larr; Examples index</a>
<div id="app"></div>
<script src="/__build__/vue-router.js"></script>
</body>
</html>