How to: Nuxt with Slice Machine

Are there any current video tutorials on how to get started from scratch with Nuxt and Slice Machine as well as Vue 3 and Slice Machine? Many of these Prismic videos I've come across are about 8 months and older, and they provide different instructions that don't match up with Prismic's documentation. And now since Slice Machine doesn't seem to require Storybook any longer, it would be helpful if there were more recent tutorials.

I came across these helpful videos, but they don't explain how slices were created. Let's Build a Site with Vue 3, Vite, and Prismic! - Frontend Horse
https://www.twitch.tv/videos/1269997545

I also tried the Nuxt Prismic Slices Boilerplate starter (prismic theme --theme-url https://github.com/prismicio-community/slice-machine-starter-nuxt --conf sm.json) and this failed.

npm ERR! code ETARGET
npm ERR! notarget No matching version found for cli-table3@^0.6.1.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

Hi @scott1,

Thanks for reaching out.

Vue.js 3 with SM is not yet supported yet, but you can inspire from this example (bit hacky) if you need to use Vue.js 3 anyway.

Otherwise, please refer to your toturial series for Vue 2 with Nuxt.js

I have also tried prismic theme --theme-url https://github.com/prismicio-community/slice-machine-starter-nuxt --conf sm.json and it is working for me; check the following screenshot
.

checking that project package-lock.json file, I can't find the missing library reported in error you are getting cli-table3@^0.6.1

https://raw.githubusercontent.com/lihbr/prismic-demo-the-last-straw/master/package-lock.json

This might be an old dependency. Can you try to update your Prismic CLI and try again?

Please let us know if you need any further help,
Fares

@Fares I'm getting this now:

A new repository has been created at: https://testundo.prismic.io/
npm ERR! code ETARGET
npm ERR! notarget No matching version found for slice-machine-ui@^0.2.0.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

My Prismic CLI version:

prismic --version
prismic-cli/4.2.0 darwin-arm64 node-v16.13.0

Also, other Nuxt Prismic starters I tried worked for me, just not that Boilerplate one.

We are still investigating this, meanwhile, can you try to update Prismic CLI to the latest version 4.2.2

Thanks @Fares. It's working for me now.

1 Like