chore(deps): update to Nuxt 3

Author: lihbr

docs/content/0.index.md

@@ -32,7 +32,7 @@ Easily connect your Nuxt 3 application to your content hosted on [Prismic](https
 
 #extra
 ::alert{type="info" style="max-width: 40rem"}
-Like Nuxt 3, the module is in an RC phase. We're polishing the remaining rough edges before launching a stable release <Icon name="noto:rocket" class="inline" />
+Like Nuxt 3 used to be, this module is in an RC phase. We're polishing the remaining rough edges before launching a stable release <Icon name="noto:rocket" class="inline" />
 
 <br />
 <br />

package-lock.json

@@ -47,23 +47,22 @@
 		"unit:watch": "vitest watch"
 	},
 	"dependencies": {
-		"@nuxt/kit": "^3.0.0-rc",
-		"@prismicio/client": "^6.6.1",
-		"@prismicio/vue": "^3.0.0",
-		"consola": "^2.15.3",
-		"ufo": "^0.8.5"
+		"@nuxt/kit": "^3.0.0",
+		"@prismicio/client": "^6.7.1",
+		"@prismicio/vue": "^3.1.1",
+		"consola": "^2.15.3"
 	},
 	"devDependencies": {
-		"@nuxt/module-builder": "latest",
+		"@nuxt/module-builder": "^0.2.1",
 		"@nuxt/test-utils": "npm:@nuxt/test-utils-edge@latest",
-		"@nuxtjs/eslint-config-typescript": "latest",
-		"c8": "^7.11.3",
-		"eslint": "^8.20.0",
-		"mock-fs": "^5.1.2",
-		"nuxt": "^3.0.0-rc",
+		"@nuxtjs/eslint-config-typescript": "^12.0.0",
+		"@vitest/coverage-c8": "^0.25.2",
+		"eslint": "^8.27.0",
+		"mock-fs": "^5.2.0",
+		"nuxt": "^3.0.0",
 		"standard-version": "^9.5.0",
-		"typescript": "^4.7.4",
-		"vitest": "^0.18.1"
+		"typescript": "^4.9.3",
+		"vitest": "^0.25.2"
 	},
 	"engines": {
 		"node": ">=14.15.0"

package.json

@@ -1,5 +1,3 @@
-import { defineNuxtConfig } from 'nuxt'
-
 import prismicModule from '../src/module'
 
 // https://v3.nuxtjs.org/docs/directory-structure/nuxt.config

playground/nuxt.config.ts

@@ -1,22 +1,28 @@
 <template>
 	<div>
 		<div
-			@click="() => refreshNuxtData()">
+			@click="() => refreshNuxtData()"
+		>
 			Pending: {{ pending }}
 		</div>
 		<div v-if="!pending">
-			<prismic-link v-slot="{ href }"
-				:field="doc.data.relation">
+			<prismic-link
+				v-slot="{ href }"
+				:field="doc?.data.relation"
+			>
 				{{ href }} foo
 			</prismic-link>
-			<prismic-link v-slot="{ href }"
-				:field="{ link_type: 'Web', url: 'https://google.com' }">
+			<prismic-link
+				v-slot="{ href }"
+				:field="{ link_type: 'Web', url: 'https://google.com' }"
+			>
 				{{ href }} bar
 			</prismic-link>
 			<prismic-rich-text
-				:field="doc.data.richtext" />
-			<!-- <prismic-text :field="home?.data.body[0].primary.title" /> -->
-			<!-- <slice-zone :slices="home?.data.body" /> -->
+				:field="doc?.data.richtext"
+			/>
+			<!-- <prismic-text :field="doc?.data.body[0].primary.title" /> -->
+			<!-- <slice-zone :slices="doc?.data.body" /> -->
 		</div>
 	</div>
 </template>

playground/pages/index.vue

@@ -5,37 +5,36 @@ import {
 	createResolver,
 	addTemplate,
 	addPlugin,
-	addAutoImport,
+	addImports,
 	addComponent,
 	extendPages
 } from '@nuxt/kit'
-import { cleanDoubleSlashes } from 'ufo'
 
 import { isRepositoryEndpoint, getRepositoryName } from '@prismicio/client'
 import * as prismicVue from '@prismicio/vue'
 
-import { name as pkgName, version as pkgVersion } from '../package.json'
 import { logger, fileExists } from './lib'
 import type { PrismicModuleOptions } from './types'
 
 // Options export
 export type { PrismicModuleOptions } from './types'
 export type { PrismicModuleOptions as ModuleOptions } from './types'
 
+const PACKAGE_NAME = '@nuxtjs/prismic'
+
 // Module export
 export default defineNuxtModule<PrismicModuleOptions>({
 	meta: {
-		name: pkgName,
-		version: pkgVersion,
+		name: PACKAGE_NAME,
 		configKey: 'prismic',
 		compatibility: { nuxt: '^3.0.0-rc.6' }
 	},
 	defaults: nuxt => ({
 		endpoint: '',
 		clientConfig: {},
-		client: cleanDoubleSlashes(`~/${nuxt.options.dir.app}/prismic/client`),
-		linkResolver: cleanDoubleSlashes(`~/${nuxt.options.dir.app}/prismic/linkResolver`),
-		htmlSerializer: cleanDoubleSlashes(`~/${nuxt.options.dir.app}/prismic/htmlSerializer`),
+		client: '~/app/prismic/client',
+		linkResolver: '~/app/prismic/linkResolver',
+		htmlSerializer: '~/app/prismic/htmlSerializer',
 		injectComponents: true,
 		components: {},
 		preview: '/preview',
@@ -80,7 +79,10 @@ export default defineNuxtModule<PrismicModuleOptions>({
 
 		// Expose options through public runtime config
 		nuxt.options.runtimeConfig.public ||= {} as typeof nuxt.options.runtimeConfig.public
-		nuxt.options.runtimeConfig.public[pkgName] = mergedOptions
+		// @ts-expect-error - Inferred type by `nuxi prepare` might vary depending on previous run.
+		//                    However, this is the source of truth for the runtime config and types
+		//                    will be inferred after it.
+		nuxt.options.runtimeConfig.public[PACKAGE_NAME] = mergedOptions
 
 		// Add plugin
 		addPlugin(resolver.resolve('runtime/plugin'))
@@ -115,8 +117,8 @@ export default defineNuxtModule<PrismicModuleOptions>({
 					from: '@prismicio/vue'
 				}
 			})
-		addAutoImport(composableAutoImports)
-		addAutoImport({
+		addImports(composableAutoImports)
+		addImports({
 			name: 'usePrismicPreview',
 			as: 'usePrismicPreview',
 			from: resolver.resolve('runtime/usePrismicPreview')

src/module.ts

@@ -31,7 +31,7 @@ export const mockedNuxtKit = async () => {
 		},
 		addTemplate: vi.fn(),
 		addPlugin: vi.fn(),
-		addAutoImport: vi.fn(),
+		addImports: vi.fn(),
 		addComponent: vi.fn(),
 		extendPages: vi.fn((extendPagesHook) => {
 			const pages = []

test/__testutils__/mockedNuxtKit.ts

@@ -1,6 +1,6 @@
 import { it, expect, vi, beforeEach, afterEach } from 'vitest'
 
-import { addAutoImport, addComponent } from '@nuxt/kit'
+import { addImports, addComponent } from '@nuxt/kit'
 
 import prismicModule from '../src/module'
 
@@ -13,7 +13,7 @@ beforeEach(() => {
 		logger: { info: vi.fn(), warn: vi.fn() }
 	}))
 	vi.mock('@nuxt/kit', async () => {
-		const { mockedNuxtKit } = await vi.importActual('./__testutils__/mockedNuxtKit')
+		const { mockedNuxtKit } = await vi.importActual<any>('./__testutils__/mockedNuxtKit')
 
 		return mockedNuxtKit()
 	})
@@ -73,9 +73,9 @@ it('doesn\'t auto-import component when `injectComponents` is `false`', () => {
 it('auto-imports composables', () => {
 	mockedPrismicModule({ endpoint: 'qwerty' })
 
-	expect(addAutoImport).toHaveBeenCalledTimes(2)
+	expect(addImports).toHaveBeenCalledTimes(2)
 	// @ts-expect-error - Mocked type is wrong
-	expect(addAutoImport.calls.flat(2).map(options => [options.name, options.as])).toMatchInlineSnapshot(`
+	expect(addImports.calls.flat(2).map(options => [options.name, options.as])).toMatchInlineSnapshot(`
 		[
 		  [
 		    "useAllPrismicDocumentsByEveryTag",