Skip to content

Commit 2b9a745

Browse files
harlan-zwharlan-zw
committed
feat(nuxt): add nuxt module
1 parent 4ac2dcd commit 2b9a745

File tree

27 files changed

+3816
-106
lines changed

27 files changed

+3816
-106
lines changed

‎examples/nuxt3/app.vue‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<script lang="ts" setup>
2+
useHead({
3+
title: 'test',
4+
titleTemplate: '%s - Nuxt module playground',
5+
link: [
6+
{
7+
href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap',
8+
rel: 'stylesheet',
9+
},
10+
],
11+
meta: [
12+
{
13+
charset: 'utf-8',
14+
},
15+
{
16+
name: 'description',
17+
content: 'description',
18+
hid: 'test',
19+
vmid: 'test',
20+
},
21+
],
22+
})
23+
</script>
24+
25+
<template>
26+
<div>
27+
<div>
28+
<NuxtPage />
29+
</div>
30+
<div style="margin-top: 30px;">
31+
<DebugHead />
32+
</div>
33+
</div>
34+
</template>

‎examples/nuxt3/assets/my-css-file.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
body {
2+
background-color: aquamarine;
3+
}

‎examples/nuxt3/composables/change-colour.ts‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
export function useChangeColour() {
2+
const counter = ref(2)
3+
const nextColour = ref('lightskyblue')
4+
const colour = ref('limegreen')
5+
6+
const changeColour = () => {
7+
counter.value++
8+
switch (counter.value) {
9+
case 1:
10+
colour.value = 'red'
11+
nextColour.value = 'limegreen'
12+
return
13+
case 2:
14+
colour.value = 'limegreen'
15+
nextColour.value = 'lightskyblue'
16+
return
17+
case 3:
18+
colour.value = 'lightskyblue'
19+
nextColour.value = 'yellow'
20+
return
21+
case 4:
22+
colour.value = 'yellow'
23+
nextColour.value = 'aquamarine'
24+
return
25+
default:
26+
colour.value = 'aquamarine'
27+
nextColour.value = 'red'
28+
counter.value = 0
29+
}
30+
}
31+
32+
return {
33+
nextColour,
34+
changeColour,
35+
colour,
36+
}
37+
}

‎examples/nuxt3/nuxt.config.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { resolve } from 'pathe'
2+
3+
export default defineNuxtConfig({
4+
alias: {
5+
'nuxt-unhead': resolve(__dirname, '../../packages/nuxt/src/module'),
6+
},
7+
modules: [
8+
'nuxt-unhead',
9+
],
10+
app: {
11+
head: {
12+
link: [
13+
{
14+
href: '/',
15+
},
16+
],
17+
viewport: 'width=device-width, initial-scale=1',
18+
},
19+
},
20+
workspaceDir: resolve(__dirname, '../../'),
21+
imports: {
22+
autoImport: true,
23+
},
24+
})

‎examples/nuxt3/pages/api/component/nested.vue‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<template>
2+
<div>
3+
<Html lang="en-AU" dir="ltr">
4+
<Head>
5+
<Meta property="og:image" content="/cover.png" />
6+
</Head>
7+
<Body class="text-gray-800 dark:text-gray-100 antialiased">
8+
<div>hello world</div>
9+
</Body>
10+
</Html>
11+
</div>
12+
</template>

‎examples/nuxt3/pages/api/component/reactivity.vue‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script lang="ts" setup>
2+
const { colour, changeColour, nextColour } = useChangeColour()
3+
</script>
4+
5+
<template>
6+
<div>
7+
<Html lang="en-AU" dir="ltr" :style="`background: ${colour}`" />
8+
<Body :style="`background: ${nextColour}; margin: 50px 100px; padding: 20px;`" class="test" />
9+
<Title>Html: {{ colour }} Body: {{ nextColour }}</Title>
10+
<h1>html-attrs</h1>
11+
<button @click="changeColour">
12+
Switch background colour
13+
</button>
14+
</div>
15+
</template>

‎examples/nuxt3/pages/api/composition/reactivity.vue‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<script lang="ts" setup>
2+
const { colour, changeColour, nextColour } = useChangeColour()
3+
4+
useHead({
5+
htmlAttrs: {
6+
style: () => `background: ${colour.value}`,
7+
lang: 'en-AU',
8+
dir: 'ltr',
9+
},
10+
})
11+
12+
useHead(() => {
13+
return {
14+
bodyAttrs: {
15+
style: () => `background: ${nextColour.value}; margin: 50px 100px; padding: 20px;`,
16+
},
17+
}
18+
})
19+
20+
useHead(() => ({
21+
title: `Html: ${colour.value} Body: ${nextColour.value}`,
22+
}))
23+
</script>
24+
25+
<template>
26+
<div>
27+
<h1>html-attrs</h1>
28+
<button @click="changeColour">
29+
Switch background colour
30+
</button>
31+
</div>
32+
</template>

‎examples/nuxt3/pages/api/option/basic.vue‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<script lang="ts">
2+
import { defineComponent } from 'vue'
3+
import type { MetaObject } from '@nuxt/schema'
4+
5+
export default defineComponent({
6+
head: {
7+
title: 'Options',
8+
meta: [
9+
{
10+
hid: 'description',
11+
name: 'description',
12+
content: 'My basic description',
13+
},
14+
],
15+
link: [
16+
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
17+
],
18+
},
19+
})
20+
</script>
21+
22+
<template>
23+
<div>
24+
options api - basic
25+
</div>
26+
</template>

‎examples/nuxt3/pages/api/option/function.vue‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<script lang="ts">
2+
import { defineComponent } from 'vue'
3+
import type { MetaObject } from '@nuxt/schema'
4+
5+
export default defineComponent({
6+
head(nuxtApp) {
7+
return (() => ({
8+
title: `Options - ${nuxtApp.vueApp._uid}`,
9+
meta: [
10+
{
11+
hid: 'description',
12+
name: 'description',
13+
content: 'function desc',
14+
},
15+
],
16+
link: [
17+
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
18+
],
19+
}))
20+
},
21+
})
22+
</script>
23+
24+
<template>
25+
<div>
26+
options api - function
27+
</div>
28+
</template>

‎examples/nuxt3/pages/benchmark/index.vue‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<script lang="ts" setup>
2+
import { useHead } from '#head'
3+
const page = ref({
4+
title: 'Home',
5+
description: 'Home page description',
6+
image: 'https://nuxtjs.org/meta_400.png',
7+
})
8+
console.time('useHead x1000')
9+
useHead({
10+
// de-dupe keys
11+
title: 'bench test',
12+
})
13+
for (const i in Array.from({ length: 1000 })) {
14+
useHead({
15+
// de-dupe keys
16+
title: () => `${page.value.title}-${i} | Nuxt`,
17+
meta: [
18+
{
19+
name: 'description',
20+
content: () => `${page.value.description} ${i}`,
21+
},
22+
{
23+
property: 'og:image',
24+
content: () => `${page.value.image}?${i}`,
25+
},
26+
],
27+
script: [
28+
{
29+
src: () => `https://example.com/script.js?${i}`,
30+
},
31+
],
32+
link: [
33+
{
34+
as: 'style',
35+
href: () => `https://example.com/style.js?${i}`,
36+
},
37+
],
38+
})
39+
}
40+
const count = ref(0)
41+
console.timeEnd('useHead x1000')
42+
const react = () => {
43+
console.time('patch')
44+
page.value.title = `Updated ${count.value++}`
45+
nextTick(() => {
46+
console.timeEnd('patch')
47+
})
48+
}
49+
</script>
50+
51+
<template>
52+
<div>
53+
<h1>Bench test</h1>
54+
<button @click="react">
55+
react
56+
</button>
57+
</div>
58+
</template>

0 commit comments

Comments
 (0)