feat!: v4 (#229)

Co-authored-by: Julien Huang <julien.h.dev@gmail.com>
Co-authored-by: lihbr <lihbr@users.noreply.github.com>

Author: lihbr

.github/workflows/ci.yml

@@ -30,7 +30,7 @@ jobs:
       matrix:
         node: [lts/*]
         # Based on https://majors.nullvoxpopuli.com/q?minors=on&packages=typescript
-        typescript: ["5.4"]
+        typescript: ["5.5", "5.6", "5.7"]
       fail-fast: false
 
     steps:

.npmrc

@@ -1,2 +1,3 @@
 shamefully-hoist=true
 strict-peer-dependencies=false
+ignore-workspace-root-check=true

CHANGELOG.md

@@ -2,6 +2,48 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [4.0.0-rc.1](https://github.com/nuxt-modules/prismic/compare/v4.0.0-rc.0...v4.0.0-rc.1) (2025-01-14)
+
+
+### Features
+
+* provide auto imports for `linkRel`, `richTextComponents`, and `sliceZoneDefaultComponent` ([5b754e4](https://github.com/nuxt-modules/prismic/commit/5b754e4afc51ad6bf8221d8d99be71a152bd9209))
+
+
+### Bug Fixes
+
+* auto imports for `linkRel`, `richTextComponents`, and `sliceZoneDefaultComponent` in nuxt 4 ([bbec245](https://github.com/nuxt-modules/prismic/commit/bbec2458c711dcb2817d72ed13845e37afe693c8))
+
+
+### Chore
+
+* **deps:** maintain dependencies ([f3255d4](https://github.com/nuxt-modules/prismic/commit/f3255d46258c9957ac45de45e343749b17ad3899))
+
+
+### Documentation
+
+* fix doc ([4e8eecf](https://github.com/nuxt-modules/prismic/commit/4e8eecfe8fcef4b679ee0123326c57927e3860fe))
+* fix doc ([4b8a344](https://github.com/nuxt-modules/prismic/commit/4b8a3442f45bc92330ebe733f017b0ef025719c1))
+* simplify doc ([5baadd5](https://github.com/nuxt-modules/prismic/commit/5baadd54c697993f730b28b9410231964b473e7d))
+* tsdocs ([42d4392](https://github.com/nuxt-modules/prismic/commit/42d43926d97f58afadd9a7f4477644bff94780f5))
+
+## [4.0.0-rc.0](https://github.com/nuxt-modules/prismic/compare/v3.4.7...v4.0.0-rc.0) (2025-01-06)
+
+
+### ⚠ BREAKING CHANGES
+
+* set setup plugin as parallel (#226)
+
+### Features
+
+* improved devtools tab ([c1d6d51](https://github.com/nuxt-modules/prismic/commit/c1d6d51a5b46389adfe2488721c7937a8e6b8943))
+* set setup plugin as parallel ([#226](https://github.com/nuxt-modules/prismic/issues/226)) ([871b19f](https://github.com/nuxt-modules/prismic/commit/871b19f5c53e4a123cf75b4707e40fbb924659ee))
+
+
+### Chore
+
+* **deps:** remove `consola` dependency ([df2ef44](https://github.com/nuxt-modules/prismic/commit/df2ef441f4126f21a9224e7f163eee89e3267fea))
+* update example and playground ([54d217c](https://github.com/nuxt-modules/prismic/commit/54d217c55ea4e9fd67ccef725af53b49290cf893))
 ### [3.4.8](https://github.com/nuxt-modules/prismic/compare/v3.4.7...v3.4.8) (2025-01-06)
 
 ### [3.4.7](https://github.com/nuxt-modules/prismic/compare/v3.4.6...v3.4.7) (2025-01-02)

README.md

@@ -36,7 +36,7 @@ Easily connect your Nuxt.js application to your content hosted on [Prismic][pris
 Install the module to your Nuxt application with one command:
 
 ```bash
-npx nuxi module add prismic
+npx nuxi@latest module add prismic
 ```
 
 Then, configure your Prismic API endpoint:
@@ -74,15 +74,15 @@ Whether you're helping us fix bugs, improve the docs, or spread the word, we'd l
 
 [prismic]: https://prismic.io
 
-<!-- TODO: Replace link with a more useful one if available -->
+<!-- Replace link with a more useful one if available -->
 
 [playground]: https://stackblitz.com/github/nuxt-modules/prismic/tree/master/examples/minimal?file=pages%2Findex.vue
 [nuxt-docs]: https://prismic.nuxtjs.org
 [prismic-docs]: https://prismic.io/docs/technical-reference/prismicio-vue?version=v4
 [changelog]: ./CHANGELOG.md
 [contributing]: ./CONTRIBUTING.md
 
-<!-- TODO: Replace link with a more useful one if available -->
+<!-- Replace link with a more useful one if available -->
 
 [forum-question]: https://community.prismic.io
 [repo-bug-report]: https://github.com/nuxt-modules/prismic/issues/new?assignees=&labels=bug&template=bug_report.md&title=

client/app.vue renamed to client/app/app.vue

@@ -16,7 +16,7 @@ import {
 	type RPCClientType,
 	type ISlicemachineClientFunctions,
 	type ISlicemachineServerFunctions,
-} from '../src/devtools/types'
+} from '../../src/devtools/types'
 
 const sliceMachineStatus = useSliceMachineStatus()
 

client/components/SlicemachineStatusTip.vue renamed to client/app/components/SlicemachineStatusTip.vue

@@ -1,4 +1,4 @@
-import type { RPCClientType } from '../../src/devtools/types'
+import type { RPCClientType } from '../../../src/devtools/types'
 
 export const useSliceMachineStatus = () => useState(
 	'prismic-slice-machine-running',

client/composables/slicemachine.ts renamed to client/app/composables/slicemachine.ts

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import type { RPCClientType } from '../../../src/devtools/types'
+
+const props = defineProps<{
+	rpc: RPCClientType
+}>()
+
+const { status, start, stop, config } = await useSlicemachine(props.rpc)
+</script>
+
+<template>
+	<div class="relative p-4 n-bg-base space-y-4">
+		<header>
+			<h1 class="inline-block rounded border border-zinc-600 bg-zinc-900 p-1.5 heading text-m">
+				<span class="i-simple-icons:prismic align-sub" /> @nuxtjs/prismic
+			</h1>
+		</header>
+
+		<main class="grid grid-cols-2 grid-auto-flow gap-4">
+			<NCard class="col-span-2 p-4 space-y-4">
+				<h2 class="text-m heading">
+					<span class="i-carbon:tools-alt align-sub" /> Slicemachine
+				</h2>
+				<section class="flex gap-2">
+					<SlicemachineStatusTip
+						:running="status.running"
+						class="flex-1"
+					/>
+					<NButton @click="status.running ? stop() : start()">
+						{{ status.running ? 'Stop' : 'Start' }} Slicemachine
+					</NButton>
+				</section>
+			</NCard>
+			<NCard class="p-4 space-y-4">
+				<h2 class="text-m heading">
+					<span class="i-carbon:notebook-reference align-sub" /> Documentation
+				</h2>
+				<h3>Nuxt</h3>
+				<p class="flex gap-2 flex-wrap">
+					<NButton
+						to="https://prismic.io/docs/content-modeling"
+						icon="i-carbon-ruler-alt"
+						target="_blank"
+					>
+						Model Content
+					</NButton>
+					<NButton
+						to="https://prismic.io/docs/nuxt-3-define-routes"
+						icon="i-carbon-3d-curve-manual"
+						target="_blank"
+					>
+						Define Routes
+					</NButton>
+					<NButton
+						to="https://prismic.io/docs/nuxt-3-fetch-data"
+						icon="i-carbon-download"
+						target="_blank"
+					>
+						Fetch Data
+					</NButton>
+					<NButton
+						to="https://prismic.io/docs/nuxt-3-template-content"
+						icon="i-carbon-paint-brush"
+						target="_blank"
+					>
+						Template Content
+					</NButton>
+				</p>
+				<h3>APIs</h3>
+				<p class="flex gap-2 flex-wrap">
+					<NButton
+						to="https://prismic.io/docs/technical-reference/prismicio-client"
+						icon="i-carbon-satellite-radar"
+						target="_blank"
+					>
+						@prismicio/client
+					</NButton>
+					<NButton
+						to="https://prismic.io/docs/technical-reference/prismicio-vue"
+						icon="i-carbon-logo-vue"
+						target="_blank"
+					>
+						@prismicio/vue
+					</NButton>
+					<NButton
+						to="https://prismic.nuxtjs.org/"
+						icon="i-simple-icons-nuxtdotjs"
+						target="_blank"
+					>
+						@nuxtjs/prismic
+					</NButton>
+				</p>
+			</NCard>
+			<NCard
+				v-if="config && 'repositoryName' in config && config.repositoryName"
+				class="p-4 space-y-4"
+			>
+				<h2 class="text-m heading">
+					<span class="i-carbon:tools-alt align-sub" /> Repository
+				</h2>
+				<p class="flex gap-2 flex-wrap">
+					<NButton
+						:to="`https://${config.repositoryName}.prismic.io/builder/working`"
+						icon="i-carbon-book"
+						target="_blank"
+					>
+						Documents
+					</NButton>
+					<NButton
+						:to="`https://${config.repositoryName}.prismic.io/builder/medias`"
+						icon="i-carbon-image"
+						target="_blank"
+					>
+						Media Library
+					</NButton>
+					<NButton
+						:to="`https://${config.repositoryName}.prismic.io/settings/repository`"
+						icon="i-carbon-settings"
+						target="_blank"
+					>
+						Settings
+					</NButton>
+				</p>
+			</NCard>
+		</main>
+	</div>
+</template>
+
+<style scoped>
+.heading {
+	@apply font-bold uppercase tracking-wider font-mono;
+}
+</style>

client/app/pages/index.vue

@@ -9,7 +9,10 @@ export default defineNuxtConfig({
 		baseURL: '/__prismic-client',
 	},
 	devServer: {
-		port: 3300,
+		port: 5173,
+	},
+	future: {
+		compatibilityVersion: 4,
 	},
 	nitro: {
 		output: {

client/nuxt.config.ts

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+const tree = ref([
+	{ title: 'Get Started', redirect: 'https://prismic.io/docs/nuxt-3-setup', icon: 'heroicons-outline:lightning-bolt' },
+	{ title: 'Module Reference', redirect: 'https://prismic.io/docs/technical-reference/nuxtjs-prismic/v4', icon: 'heroicons-outline:book-open' },
+])
+</script>
+
+<template>
+	<nav>
+		<ul>
+			<li
+				v-for="link in tree"
+				:key="link.redirect"
+			>
+				<NuxtLink
+					class="link"
+					:to="link.redirect"
+					target="_blank"
+				>
+					<Icon
+						:name="link.icon"
+					/>
+					{{ link.title }}
+				</NuxtLink>
+			</li>
+		</ul>
+	</nav>
+</template>
+
+<style scoped lang="ts">
+css({
+  nav: {
+    display: 'none',
+    '@lg': {
+      display: 'block'
+    },
+    ul: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flex: '1',
+      maxWidth: '100%',
+      truncate: true,
+
+      '& > * + *': {
+        marginLeft: '{space.2}'
+      },
+
+      li: {
+        display: 'inline-flex',
+        gap: '{space.1}',
+      },
+
+      '.link': {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '{space.2}',
+        padding: '{space.2} {space.4}',
+        fontSize: '{fontSize.sm}',
+        borderRadius: '{radii.md}',
+        outline: 'none',
+        transition: 'background 200ms ease',
+
+        svg: {
+          display: 'inline-block'
+        },
+
+        '&:active,&.active,&:hover': {
+          backgroundColor: '{color.gray.100}',
+          '@dark': {
+            backgroundColor: '{color.gray.900}',
+          },
+        },
+
+        '&.active': {
+          boxShadow: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
+          fontWeight: '{fontWeight.semibold}'
+        }
+      }
+    }
+  }
+})
+</style>

client/pages/index.vue

@@ -0,0 +1,3 @@
+<template>
+	<div />
+</template>