diff --git a/index.html b/index.html index 718acf7..c69b042 100644 --- a/index.html +++ b/index.html @@ -6,15 +6,17 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - <%- project_name %> + +
+ diff --git a/package-lock.json b/package-lock.json index cf40e9c..fd365d1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,10 +10,12 @@ "dependencies": { "@geoman-io/leaflet-geoman-free": "^2.14.2", "@nuxt/devalue": "^2.0.0", + "@unhead/ssr": "^1.1.26", "axios": "^1.3.6", "js-yaml": "^4.1.0", "leaflet": "^1.9.3", "pinia": "^2.0.35", + "unhead": "^1.1.26", "vue": "^3.2.47", "vue-router": "^4.1.6" }, @@ -906,6 +908,53 @@ "integrity": "sha512-z6nr0TTEOBGkzLGmbypWOGnpSpSIBorEhC4L+4HeQ2iezKCi4f77kyslRwvHeNitymGQ+oFyIWGP96l/DPSV9w==", "dev": true }, + "node_modules/@unhead/dom": { + "version": "1.1.26", + "resolved": "https://registry.npmjs.org/@unhead/dom/-/dom-1.1.26.tgz", + "integrity": "sha512-6I8z170OAO19h/AslASN4Xw0hqItQFMKhRJQtplQs1BZ62LsDmNKuqJiYueX39U+IfIvIV3j/q1mQwt9lgMwTw==", + "dependencies": { + "@unhead/schema": "1.1.26", + "@unhead/shared": "1.1.26" + }, + "funding": { + "url": "https://github.com/sponsors/harlan-zw" + } + }, + "node_modules/@unhead/schema": { + "version": "1.1.26", + "resolved": "https://registry.npmjs.org/@unhead/schema/-/schema-1.1.26.tgz", + "integrity": "sha512-l93zaizm+pu36uMssdtzSC2Y61ncZaBBouZn0pB8rVI14V0hPxeXuSNIuPh2WjAm8wfb8EnCSE3LNguoqTar7g==", + "dependencies": { + "hookable": "^5.5.3", + "zhead": "^2.0.4" + }, + "funding": { + "url": "https://github.com/sponsors/harlan-zw" + } + }, + "node_modules/@unhead/shared": { + "version": "1.1.26", + "resolved": "https://registry.npmjs.org/@unhead/shared/-/shared-1.1.26.tgz", + "integrity": "sha512-gnUfNrl8w7hQHke9P0au7klcG9bHVOXqbDvya2uARA/8TyxNz87i0uakraO+P6/+zf484dw3b3MYkXq0thK2eg==", + "dependencies": { + "@unhead/schema": "1.1.26" + }, + "funding": { + "url": "https://github.com/sponsors/harlan-zw" + } + }, + "node_modules/@unhead/ssr": { + "version": "1.1.26", + "resolved": "https://registry.npmjs.org/@unhead/ssr/-/ssr-1.1.26.tgz", + "integrity": "sha512-KYJDGgVNtU2i+NHu17o2zFXqsoLukOFEz81XrWQ8nQdY5+VNjy7IiTLp1dlx3umn1ohZjHySz4LXQCT4zUApSw==", + "dependencies": { + "@unhead/schema": "1.1.26", + "@unhead/shared": "1.1.26" + }, + "funding": { + "url": "https://github.com/sponsors/harlan-zw" + } + }, "node_modules/@vitejs/plugin-vue": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.1.0.tgz", @@ -2749,6 +2798,11 @@ "he": "bin/he" } }, + "node_modules/hookable": { + "version": "5.5.3", + "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz", + "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==" + }, "node_modules/http-errors": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz", @@ -4857,6 +4911,20 @@ "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==", "dev": true }, + "node_modules/unhead": { + "version": "1.1.26", + "resolved": "https://registry.npmjs.org/unhead/-/unhead-1.1.26.tgz", + "integrity": "sha512-MshcPoPLXSGRgYtczddGvMgLUISTbt2pxihqD5kZVXKmY2FZLj1OQIY111aX45Xq47XJxjvYavvoyeUFroKQcg==", + "dependencies": { + "@unhead/dom": "1.1.26", + "@unhead/schema": "1.1.26", + "@unhead/shared": "1.1.26", + "hookable": "^5.5.3" + }, + "funding": { + "url": "https://github.com/sponsors/harlan-zw" + } + }, "node_modules/unpipe": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", @@ -5303,6 +5371,14 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/zhead": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/zhead/-/zhead-2.0.4.tgz", + "integrity": "sha512-V4R94t3ifk9AURym6OskbKcnowzgp5Z88tkoL/NF67vyryNxC62u6mx5F1Ux4oh4+YN7FFmKYEyWy6m5kfPH6g==", + "funding": { + "url": "https://github.com/sponsors/harlan-zw" + } } }, "dependencies": { @@ -5870,6 +5946,41 @@ "integrity": "sha512-z6nr0TTEOBGkzLGmbypWOGnpSpSIBorEhC4L+4HeQ2iezKCi4f77kyslRwvHeNitymGQ+oFyIWGP96l/DPSV9w==", "dev": true }, + "@unhead/dom": { + "version": "1.1.26", + "resolved": "https://registry.npmjs.org/@unhead/dom/-/dom-1.1.26.tgz", + "integrity": "sha512-6I8z170OAO19h/AslASN4Xw0hqItQFMKhRJQtplQs1BZ62LsDmNKuqJiYueX39U+IfIvIV3j/q1mQwt9lgMwTw==", + "requires": { + "@unhead/schema": "1.1.26", + "@unhead/shared": "1.1.26" + } + }, + "@unhead/schema": { + "version": "1.1.26", + "resolved": "https://registry.npmjs.org/@unhead/schema/-/schema-1.1.26.tgz", + "integrity": "sha512-l93zaizm+pu36uMssdtzSC2Y61ncZaBBouZn0pB8rVI14V0hPxeXuSNIuPh2WjAm8wfb8EnCSE3LNguoqTar7g==", + "requires": { + "hookable": "^5.5.3", + "zhead": "^2.0.4" + } + }, + "@unhead/shared": { + "version": "1.1.26", + "resolved": "https://registry.npmjs.org/@unhead/shared/-/shared-1.1.26.tgz", + "integrity": "sha512-gnUfNrl8w7hQHke9P0au7klcG9bHVOXqbDvya2uARA/8TyxNz87i0uakraO+P6/+zf484dw3b3MYkXq0thK2eg==", + "requires": { + "@unhead/schema": "1.1.26" + } + }, + "@unhead/ssr": { + "version": "1.1.26", + "resolved": "https://registry.npmjs.org/@unhead/ssr/-/ssr-1.1.26.tgz", + "integrity": "sha512-KYJDGgVNtU2i+NHu17o2zFXqsoLukOFEz81XrWQ8nQdY5+VNjy7IiTLp1dlx3umn1ohZjHySz4LXQCT4zUApSw==", + "requires": { + "@unhead/schema": "1.1.26", + "@unhead/shared": "1.1.26" + } + }, "@vitejs/plugin-vue": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.1.0.tgz", @@ -7284,6 +7395,11 @@ "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", "dev": true }, + "hookable": { + "version": "5.5.3", + "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz", + "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==" + }, "http-errors": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz", @@ -8762,6 +8878,17 @@ "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==", "dev": true }, + "unhead": { + "version": "1.1.26", + "resolved": "https://registry.npmjs.org/unhead/-/unhead-1.1.26.tgz", + "integrity": "sha512-MshcPoPLXSGRgYtczddGvMgLUISTbt2pxihqD5kZVXKmY2FZLj1OQIY111aX45Xq47XJxjvYavvoyeUFroKQcg==", + "requires": { + "@unhead/dom": "1.1.26", + "@unhead/schema": "1.1.26", + "@unhead/shared": "1.1.26", + "hookable": "^5.5.3" + } + }, "unpipe": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", @@ -9042,6 +9169,11 @@ "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==", "dev": true + }, + "zhead": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/zhead/-/zhead-2.0.4.tgz", + "integrity": "sha512-V4R94t3ifk9AURym6OskbKcnowzgp5Z88tkoL/NF67vyryNxC62u6mx5F1Ux4oh4+YN7FFmKYEyWy6m5kfPH6g==" } } } diff --git a/package.json b/package.json index 82d9faa..772eac7 100644 --- a/package.json +++ b/package.json @@ -17,10 +17,12 @@ "dependencies": { "@geoman-io/leaflet-geoman-free": "^2.14.2", "@nuxt/devalue": "^2.0.0", + "@unhead/ssr": "^1.1.26", "axios": "^1.3.6", "js-yaml": "^4.1.0", "leaflet": "^1.9.3", "pinia": "^2.0.35", + "unhead": "^1.1.26", "vue": "^3.2.47", "vue-router": "^4.1.6" }, diff --git a/server.js b/server.js index b6182df..be1cf73 100644 --- a/server.js +++ b/server.js @@ -75,11 +75,17 @@ export async function createServer( render = (await import('./dist/server/entry-server.js')).render } - const [appHtml, appState, preloadLinks] = await render(url, manifest) + const [appHtml, appState, preloadLinks, tagMeta] = await render( + url, + manifest + ) const html = template .replace(``, preloadLinks) .replace(``, appState) + .replace(``, tagMeta.headTags) + .replace(``, tagMeta.bodyTagsOpen) + .replace(``, tagMeta.bodyTags) .replace(makeAppContainer(), makeAppContainer(appHtml)) res.status(200).set({ 'Content-Type': 'text/html' }).end(html) diff --git a/src/App.vue b/src/App.vue index e92bc4b..90164cc 100644 --- a/src/App.vue +++ b/src/App.vue @@ -6,5 +6,14 @@ diff --git a/src/entry-server.js b/src/entry-server.js index 62deae2..1742ef0 100644 --- a/src/entry-server.js +++ b/src/entry-server.js @@ -2,6 +2,8 @@ import { basename } from 'node:path' import { renderToString } from 'vue/server-renderer' import { createApp } from './main' import { registerGlobalComponents } from '@/components/globalComponents' +import { getActiveHead } from 'unhead' +import { renderSSRHead } from '@unhead/ssr' import devalue from '@nuxt/devalue' export async function render(url, manifest) { @@ -18,7 +20,7 @@ export async function render(url, manifest) { // components that have been instantiated during this render call. const ctx = {} const html = await renderToString(app, ctx) - + const headPayload = await renderSSRHead(getActiveHead()) const renderState = `