diff --git a/docs/content/en/getting-started/setup.md b/docs/content/en/getting-started/setup.md index dcfeb1df..e5653345 100644 --- a/docs/content/en/getting-started/setup.md +++ b/docs/content/en/getting-started/setup.md @@ -3,6 +3,7 @@ title: Quick start description: '@nuxtjs/composition-api provides a way to use the Vue 3 Composition API with Nuxt-specific features.' category: Getting started position: 2 +version: 0.161 --- ## Quick start @@ -38,6 +39,8 @@ position: 2 Note that [using `buildModules`](https://nuxtjs.org/api/configuration-modules#-code-buildmodules-code-) requires Nuxt >= 2.9. Just add it to your `modules` if you're on a lower version. + If you are using `@nuxtjs/pwa` (or any other module that modifies your global `head` properties), make sure to add this module after it in the `buildModules` list. + 3. **Optional**. Currently [there's an issue with static site generation and async functions](https://github.com/nuxt-community/composition-api/issues/44) which means that you'll need to add time between pages being generated to allow for any async functions to resolve, if you are pre-generating any of your pages: ```js[nuxt.config.js] diff --git a/package.json b/package.json index 062c41d7..bf91ddfb 100644 --- a/package.json +++ b/package.json @@ -75,6 +75,7 @@ "@babel/preset-typescript": "^7.12.7", "@nuxt/types": "^2.14.7", "@nuxtjs/module-test-utils": "^1.6.3", + "@nuxtjs/pwa": "^3.2.2", "@release-it/conventional-changelog": "^2.0.0", "@types/fs-extra": "^9.0.4", "@types/jest": "^26.0.15", diff --git a/src/entrypoint.ts b/src/entrypoint.ts index 0fd1df6f..91d94f55 100644 --- a/src/entrypoint.ts +++ b/src/entrypoint.ts @@ -7,7 +7,7 @@ export { useAsync } from './async' export { defineComponent } from './component' export { useContext, withContext } from './context' export { useFetch } from './fetch' -export { globalPlugin, onGlobalSetup } from './hooks' +export { globalPlugin, onGlobalSetup, setMetaPlugin } from './hooks' export { useMeta } from './meta' export { reqRef, reqSsrRef } from './req-ref' export { ssrRef, shallowSsrRef, setSSRContext, ssrPromise } from './ssr-ref' diff --git a/src/hooks.ts b/src/hooks.ts index 0b548359..deefd19a 100644 --- a/src/hooks.ts +++ b/src/hooks.ts @@ -31,6 +31,15 @@ export const onGlobalSetup = (fn: SetupFunction) => { globalSetup.add(fn) } +/** + * + * @private + */ +export const setMetaPlugin: Plugin = context => { + const { head } = context.app + Object.assign(context.app, getHeadOptions({ head: head as any })) +} + /** * @private */ @@ -41,9 +50,6 @@ export const globalPlugin: Plugin = context => { reqRefs.forEach(reset => reset()) } - const { head } = context.app - Object.assign(context.app, getHeadOptions({ head: head as any })) - context.app.setup = function (...args) { let result = {} if (setup instanceof Function) { diff --git a/src/index.ts b/src/index.ts index baf607ad..dbf017c7 100644 --- a/src/index.ts +++ b/src/index.ts @@ -36,6 +36,11 @@ const compositionApiModule: Module = function () { }, }) + this.addPlugin({ + src: resolve(libRoot, 'templates', 'meta.js'), + fileName: join('composition-api', 'meta.js'), + }) + const staticPath = join(this.options.buildDir || '', 'static-json') this.nuxt.hook('generate:route', () => { diff --git a/templates/meta.js b/templates/meta.js new file mode 100644 index 00000000..1601acdd --- /dev/null +++ b/templates/meta.js @@ -0,0 +1,3 @@ +import { setMetaPlugin } from '@nuxtjs/composition-api' + +export default setMetaPlugin diff --git a/test/e2e/meta.ts b/test/e2e/meta.ts index 7b2fb9a2..5a9a0803 100644 --- a/test/e2e/meta.ts +++ b/test/e2e/meta.ts @@ -16,7 +16,12 @@ test('Shows correct title on server-loaded page', async t => { await t.expect(Selector('title').innerText).eql('mounted title - Changed') await t.click(Selector('button').withText('Set')) - await t.expect(Selector('meta').getAttribute('content')).eql('new message') + await t + .expect(Selector('meta[name=message]').getAttribute('content')) + .eql('new message') + await t + .expect(Selector('meta[name=viewport]').getAttribute('content')) + .eql('width=device-width, initial-scale=1') await t.expect(Selector('noscript').textContent).eql('Test') await t.click(Selector('a').withText('back')) @@ -36,6 +41,11 @@ test('Shows correct title on client-loaded page', async t => { await t.expect(Selector('title').innerText).eql('mounted title - Changed') await t.click(Selector('button').withText('Set')) - await t.expect(Selector('meta').getAttribute('content')).eql('new message') + await t + .expect(Selector('meta[name=message]').getAttribute('content')) + .eql('new message') + await t + .expect(Selector('meta[name=viewport]').getAttribute('content')) + .eql('width=device-width, initial-scale=1') await t.expect(Selector('noscript').textContent).eql('Test') }) diff --git a/test/fixture/nuxt.config.js b/test/fixture/nuxt.config.js index f635b6f2..81359e9f 100644 --- a/test/fixture/nuxt.config.js +++ b/test/fixture/nuxt.config.js @@ -68,5 +68,11 @@ module.exports = { }, buildModules: [ process.env.NODE_ENV === 'test' ? require('../..').default : rootDir, + '@nuxtjs/pwa', ], + pwa: { + icon: false, + manifest: false, + workbox: false, + }, } diff --git a/yarn.lock b/yarn.lock index fa849741..0b8304d7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1531,6 +1531,19 @@ request "^2.88.2" request-promise-native "^1.0.8" +"@nuxtjs/pwa@^3.2.2": + version "3.2.2" + resolved "https://registry.yarnpkg.com/@nuxtjs/pwa/-/pwa-3.2.2.tgz#e03c632e30f3df287a842d67323d945f36b97440" + integrity sha512-B+2VKwmaw40Wyds0hOKuN9R8ODHg7de8B7uQbzaZpLNuCinfKioQOk8jjaLDKRf4sndNG4AYI90Et4M+MRQetQ== + dependencies: + defu "^3.1.0" + execa "^4.0.3" + fs-extra "^9.0.1" + hasha "^5.2.2" + jimp-compact "^0.16.1" + lodash.template "^4.5.0" + workbox-cdn "^5.1.3" + "@nuxtjs/youch@^4.2.3": version "4.2.3" resolved "https://registry.yarnpkg.com/@nuxtjs/youch/-/youch-4.2.3.tgz#36f8b22df5a0efaa81373109851e1d857aca6bed" @@ -5590,7 +5603,7 @@ defu@^2.0.4: resolved "https://registry.yarnpkg.com/defu/-/defu-2.0.4.tgz#09659a6e87a8fd7178be13bd43e9357ebf6d1c46" integrity sha512-G9pEH1UUMxShy6syWk01VQSRVs3CDWtlxtZu7A+NyqjxaCA4gSlWAKDBx6QiUEKezqS8+DUlXLI14Fp05Hmpwg== -defu@^3.2.2: +defu@^3.1.0, defu@^3.2.2: version "3.2.2" resolved "https://registry.yarnpkg.com/defu/-/defu-3.2.2.tgz#be20f4cc49b9805d54ee6b610658d53894942e97" integrity sha512-8UWj5lNv7HD+kB0e9w77Z7TdQlbUYDVWqITLHNqFIn6khrNHv5WQo38Dcm1f6HeNyZf0U7UbPf6WeZDSdCzGDQ== @@ -7326,6 +7339,14 @@ hash.js@^1.0.0, hash.js@^1.0.3: inherits "^2.0.3" minimalistic-assert "^1.0.1" +hasha@^5.2.2: + version "5.2.2" + resolved "https://registry.yarnpkg.com/hasha/-/hasha-5.2.2.tgz#a48477989b3b327aea3c04f53096d816d97522a1" + integrity sha512-Hrp5vIK/xr5SkeN2onO32H0MgNZ0f17HRNH39WfL0SYUNOTZ5Lz1TJ8Pajo/87dYGEFlLMm7mIc/k/s6Bvz9HQ== + dependencies: + is-stream "^2.0.0" + type-fest "^0.8.0" + he@1.2.0, he@^1.1.0, he@^1.1.1, he@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f" @@ -8687,6 +8708,11 @@ jest@^26.6.3: import-local "^3.0.2" jest-cli "^26.6.3" +jimp-compact@^0.16.1: + version "0.16.1" + resolved "https://registry.yarnpkg.com/jimp-compact/-/jimp-compact-0.16.1.tgz#9582aea06548a2c1e04dd148d7c3ab92075aefa3" + integrity sha512-dZ6Ra7u1G8c4Letq/B5EzAxj4tLFHL+cGtdpR+PVm4yzPDj+lCk+AbivWt1eOM+ikzkowtyV7qSqX6qr3t71Ww== + jiti@^0.1.11, jiti@^0.1.12: version "0.1.12" resolved "https://registry.yarnpkg.com/jiti/-/jiti-0.1.12.tgz#ffe4a09266d739b77721170fb73115c50b680330" @@ -13733,7 +13759,7 @@ type-fest@^0.6.0: resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.6.0.tgz#8d2a2370d3df886eb5c90ada1c5bf6188acf838b" integrity sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg== -type-fest@^0.8.1: +type-fest@^0.8.0, type-fest@^0.8.1: version "0.8.1" resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d" integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA== @@ -14479,6 +14505,11 @@ wordwrap@^1.0.0: resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb" integrity sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus= +workbox-cdn@^5.1.3: + version "5.1.4" + resolved "https://registry.yarnpkg.com/workbox-cdn/-/workbox-cdn-5.1.4.tgz#dbd8acee70b1978be70106207590bbb76af935cf" + integrity sha512-04gM3mi8QGutokkSaA9xunVfjURnLbo9TTWyi8+pSDCEW5cD8u5GbJiliLK1vB9CShk/9OY1UDfW+XcmD+d6KQ== + worker-farm@^1.7.0: version "1.7.0" resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.7.0.tgz#26a94c5391bbca926152002f69b84a4bf772e5a8"