nuxt-modules / prismic

Easily connect your Nuxt.js application to your content hosted on Prismic

Home Page:https://prismic.nuxtjs.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

usePrismic is not defined

Kamsou opened this issue · comments

Versions

  • nuxt: 3.0.0-rc.9
  • @nuxtjs/prismic: ^3.0.0-rc.0
  • node: v18.0.0

Reproduction

package.json

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "slicemachine": "start-slicemachine"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config-typescript": "^11.0.0",
    "@nuxtjs/prismic": "^3.0.0-rc.0",
    "autoprefixer": "^10.4.8",
    "eslint": "^8.23.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-nuxt": "^4.0.0",
    "eslint-plugin-prettier": "^4.2.1",
    "nuxt": "3.0.0-rc.9",
    "postcss": "^8.4.16",
    "slice-machine-ui": "^0.4.2",
    "tailwindcss": "^3.1.8",
    "typescript": "^4.8.2"
  }
}

nuxt.config.ts

export default defineNuxtConfig({
    css: [ '@/assets/styles/styles.css' ],
    build: {
        postcss: {
          postcssOptions: {
            plugins: {
              tailwindcss: {},
              autoprefixer: {},
            },
          },
        },
    },
    modules: ['@nuxtjs/prismic'],
    prismic: { endpoint: 'https://explore-314.prismic.io/api/v2' }
})

app.js

<template>
  <div>
    <NuxtPage />
  </div>
</template>

index.js

<script setup>

const title = ref('title')
const description = ref('description')

useHead({
  title,
  meta: [{
    name: 'description',
    content: description
  }]
})

const prismic = usePrismic()

console.log(prismic)

</script>

<template>
    <div class="h-[100vh] w-full">
        <h1 class="flex justify-center items-center h-full">Salut</h1>
    </div>    
</template>

Steps to reproduce

See details.
Npm run dev

What is Expected?

keep Prismic info

What is actually happening?

Screenshot 2022-09-05 at 12 15 30

commented

Hey there, thanks for the comprehensive issue!

This should be fixed with Prismic module 3.0.0-rc.1.
This error was due to Nuxt introducing a breaking change in rc.9, see #169 for more information.

Also, just a quick heads up that Slice Machine doesn't officially support Nuxt 3 yet. The experience is still tailored around Nuxt 2 so you might encounter some road bumps with Nuxt 3.

Feel free to reopen if you're still experiencing an issue 💐

Still error on "@nuxtjs/prismic": "^3.0.0-rc.2",

commented

Hey @kieuminhcanh, I'm sorry but I'm not able to reproduce: https://stackblitz.com/edit/github-dysfy1?file=pages/index.vue
Just a heads up that rc.2 dropped support for Nuxt RCs, you have to be on Nuxt 3.0.0 or greater now.

Please open another issue with a comprehensive reproduction if you're still experiencing the issue.