usePrismic is not defined

Developing with Prismic
1

Hi,

I have a Nuxt3 project that I want to integrate prismic into.
To do this, I followed the tutorial Install Prismic with Nuxt - Documentation - Prismic but when I display the home page, I get the message:

500
usePrismic is not defined

Here is my home page:


<script setup lang="ts">
import { components } from "~/slices";

const prismic = usePrismic();
const { data: page } = useAsyncData("[homepage]", () =>
 prismic.client.getSingle("homepage")
);

useHead({
 title: page.value?.data.meta_title,
 meta:[
 {
 name: "description",
 content: page.value?.data.meta_description,
 },
 ],
});
</script>

<template>
 <SliceZone
 wrapper="main"
 :slices="page?.data.slices ?? []"
 :components="components"
 />
</template>

My nuxt.js file:


// https://nuxt.com/docs/api/configuration/nuxt-config

import vuetify, { transformAssetUrls } from "vite-plugin-vuetify";

export default defineNuxtConfig({
 runtimeConfig: {
 audience: {
 urlFront: "",
 urlApi: "",
 recaptcha: "",
 environment: "local",
 },
 },
 devtools: { enabled: true },
 build: {
 transpile: ["vuetify"],
 },
 modules: [
 (_options, nuxt) => {
 nuxt.hooks.hook("vite:extendConfig", (config) => {
 // @ts-expect-error
 config.plugins.push(vuetify({ autoImport: true }));
 });
 },
 "@pinia/nuxt",
 "@sidebase/nuxt-auth",
 ],
 quickly: {
 view: {
 template: {
 transformAssetUrls,
 },
 },
 },
 auth: {
 baseURL: "http://localhost:8081/v1/",
 provider: {
 type: "local",
 endpoints: {
 signIn: { path: "/auth/login", method: "post" },
 signOut: false,
 signUp: { path: "auth/register", method: "post" },
 getSession: { path: "auth/user", method: "get" },
 },
 token: { signInResponseTokenPointer: "/tokens/access/token" },
 },
 },
});

My conf:

  • Operating System: Windows_NT
  • NodeVersion: v18.18.1
  • NuxtVersion: 3.11.2
  • CLI Version: 3.11.1
  • NitroVersion: 2.9.6
  • Package Manager: npm@9.8.1
    -Builder:-
  • User Config: runtimeConfig, devtools, build, modules, vite, auth
  • Runtime Modules: (), @pinia/nuxt@0.5.1, @sidebase/nuxt-auth@0.7.2
  • Build Modules: -
2

Hey @ricou,

I'm sorry we couldn't get back to you earlier.

Did you get to run the Slice Machine init command? npx @slicemachine/ini@latest? If yes, it's weird it didn't install the Prismic module :thinking:

Can you try installing the Prismic Nuxt Module in your Nuxt config following this process: Get Started ยท Nuxt Prismic

Let me know if that solves your issue :slight_smile: