How do I install Prismic.io tool on an existing Nuxt.js project

Question

I have been trying to install Prismic.io tool on my existing Nuxt.js project:

I have upgraded nuxt first:

npm upgrade nuxt

I have installed prismic via npm:

npm i @nuxtjs/prismic

In package.json file, the dependencies are now the following:

"dependencies": {
  "@fortawesome/fontawesome-free": "^5.15.3",
  "@nuxtjs/prismic": "^1.3.1",
  "core-js": "^3.9.1",
  "node-sass": "^5.0.0",
  "nuxt": "^2.15.3",
  "nuxt-i18n": "^6.27.1",
  "sass-loader": "^10.1.1"
}

I have created link-resolver.js and html-serializer.js files in the plugins folder:

link-resolver.js :

export default function (doc) {
    return '/'
}

html-serializer :

export default function (doc) {
    return '/'
}

then, I have added the needed modules in nuxt.config.js file:

modules: [
  'nuxt-i18n',
  '@nuxtjs/prismic'
],
prismic: {
  endpoint: 'https://prismicrepository.cdn.prismic.io/api/v2',
  linkResolver: '~/plugins/link-resolver',
  htmlSerializer: '~/plugins/html-serializer',
}

Then I have run

npm install

And after all of these steps, my project still acting as there is no prismic tool installed.

score 0 · Answer 1 · answered Jun 27 '21 at 10:14

Looking at the documentation, it looks like you need to:

npm install --save-dev @nuxtjs/prismic, then make some configuration in nuxt.config.js

{
  buildModules: [
    '@nuxtjs/prismic'
  ],
  prismic: {
    // don't forget to update "REPOSITORY" here
    endpoint: 'https://<REPOSITORY>.cdn.prismic.io/api/v2',
    modern: true
  }
}

You've already written the resolver. Also, you don't need to npm install at the end because it already does when installing your NPM packages.
After that, everything should be working.

How do I install Prismic.io tool on an existing Nuxt.js project

1 Answers1