Slice Simulator Nuxt 3

tadas.majeris · May 19, 2022, 11:21am

Hello,

I am trying to setup with Prismic 3 and Nuxt 3 version, and get this error:
We can’t connect to the simulator page

[Vue warn]: Unhandled error during execution of render function
  at <SliceSimulator state= { slices: { components: { image_push: [Object] } } } >
[nuxt] [request error] h is not a function
  at Proxy.render (./node_modules/@prismicio/slice-simulator-vue/dist/index.js:75:12)

and in slice machine client console I am getting this error:

Uncaught SyntaxError: 
The requested module '/_nuxt/node_modules/escape-html/index.js?v=c4e61d85' 
does not provide an export named 'default' 
(at http://localhost:3000/_nuxt/node_modules/@prismicio/helpers/dist/index.js?v=c4e61d85:4:8)

Phil · May 23, 2022, 10:26am

Hi Tadas,

Slice Machine does not yet support Nuxt 3, but the team is working on this

Thanks.

victorthevictoriousv · May 23, 2022, 11:16am

Hey!

Im trying to use prismic and slicemachine on a nuxt 3 project. I did the command npx @slicemachine/init
and get this error message.

⠏ Downloading Slice Machinenode:internal/errors:841
  const err = new Error(message);
              ^

Error: Command failed: npm install --save @nuxtjs/prismic @prismicio/slice-simulator-vue
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: undefined@undefined
npm ERR! Found: vue@3.2.33
npm ERR! node_modules/vue
npm ERR!   peer vue@"3.2.33" from @nuxt/vite-builder@3.0.0-rc.3
npm ERR!   node_modules/@nuxt/vite-builder
npm ERR!     @nuxt/vite-builder@"^3.0.0-rc.3" from nuxt@3.0.0-rc.3
npm ERR!     node_modules/nuxt
npm ERR!       dev nuxt@"3.0.0-rc.3" from the root project
npm ERR!   peer vue@"^3.0.0" from @prismicio/vue@3.0.0-beta.6
npm ERR!   node_modules/@prismicio/vue
npm ERR!     @prismicio/vue@"^3.0.0-beta" from @nuxtjs/prismic@3.0.0-alpha.5
npm ERR!     node_modules/@nuxtjs/prismic
npm ERR!       dev @nuxtjs/prismic@"^3.0.0-alpha.5" from the root project
npm ERR!   5 more (@vitejs/plugin-vue, @vue/server-renderer, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! @prismicio/slice-simulator-vue@"*" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: vue@2.6.14
npm ERR! node_modules/vue
npm ERR!   peer vue@"^2.6.0" from @prismicio/slice-simulator-vue@0.2.1
npm ERR!   node_modules/@prismicio/slice-simulator-vue
npm ERR!     @prismicio/slice-simulator-vue@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/victorpettersson/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/victorpettersson/.npm/_logs/2022-05-23T10_55_45_736Z-debug-0.log

    at ChildProcess.exithandler (node:child_process:398:12)
    at ChildProcess.emit (node:events:527:28)
    at maybeClose (node:internal/child_process:1092:16)
    at Process.ChildProcess._handle.onexit (node:internal/child_process:302:5) {
  code: 1,
  killed: false,
  signal: null,
  cmd: 'npm install --save @nuxtjs/prismic @prismicio/slice-simulator-vue',
  stdout: '',
  stderr: 'npm ERR! code ERESOLVE\n' +
    'npm ERR! ERESOLVE could not resolve\n' +
    'npm ERR! \n' +
    'npm ERR! While resolving: undefined@undefined\n' +
    'npm ERR! Found: vue@3.2.33\n' +
    'npm ERR! node_modules/vue\n' +
    'npm ERR!   peer vue@"3.2.33" from @nuxt/vite-builder@3.0.0-rc.3\n' +
    'npm ERR!   node_modules/@nuxt/vite-builder\n' +
    'npm ERR!     @nuxt/vite-builder@"^3.0.0-rc.3" from nuxt@3.0.0-rc.3\n' +
    'npm ERR!     node_modules/nuxt\n' +
    'npm ERR!       dev nuxt@"3.0.0-rc.3" from the root project\n' +
    'npm ERR!   peer vue@"^3.0.0" from @prismicio/vue@3.0.0-beta.6\n' +
    'npm ERR!   node_modules/@prismicio/vue\n' +
    'npm ERR!     @prismicio/vue@"^3.0.0-beta" from @nuxtjs/prismic@3.0.0-alpha.5\n' +
    'npm ERR!     node_modules/@nuxtjs/prismic\n' +
    'npm ERR!       dev @nuxtjs/prismic@"^3.0.0-alpha.5" from the root project\n' +
    'npm ERR!   5 more (@vitejs/plugin-vue, @vue/server-renderer, ...)\n' +
    'npm ERR! \n' +
    'npm ERR! Could not resolve dependency:\n' +
    'npm ERR! @prismicio/slice-simulator-vue@"*" from the root project\n' +
    'npm ERR! \n' +
    'npm ERR! Conflicting peer dependency: vue@2.6.14\n' +
    'npm ERR! node_modules/vue\n' +
    'npm ERR!   peer vue@"^2.6.0" from @prismicio/slice-simulator-vue@0.2.1\n' +
    'npm ERR!   node_modules/@prismicio/slice-simulator-vue\n' +
    'npm ERR!     @prismicio/slice-simulator-vue@"*" from the root project\n' +
    'npm ERR! \n' +
    'npm ERR! Fix the upstream dependency conflict, or retry\n' +
    'npm ERR! this command with --force, or --legacy-peer-deps\n' +
    'npm ERR! to accept an incorrect (and potentially broken) dependency resolution.\n' +
    'npm ERR! \n' +
    'npm ERR! See /Users/victorpettersson/.npm/eresolve-report.txt for a full report.\n' +
    '\n' +
    'npm ERR! A complete log of this run can be found in:\n' +
    'npm ERR!     /Users/victorpettersson/.npm/_logs/2022-05-23T10_55_45_736Z-debug-0.log\n'
}

Also when I try to install slice-simulator with npm i --save prismicio/slice-simulator-vue

I get this 

npm ERR! code 128
npm ERR! An unknown git error occurred
npm ERR! command git --no-replace-objects ls-remote ssh://git@github.com/prismicio/slice-simulator-vue.git
npm ERR! ERROR: Repository not found.
npm ERR! fatal: Could not read from remote repository.
npm ERR! 
npm ERR! Please make sure you have the correct access rights
npm ERR! and the repository exists.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/victorpettersson/.npm/_logs/2022-05-23T11_12_42_833Z-debug-0.log

Do you guys not why? I use node 16
and my package.json looks like this
{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview"
  },
  "devDependencies": {
    "@nuxtjs/prismic": "^3.0.0-alpha.5",
    "autoprefixer": "^10.4.7",
    "nuxt": "3.0.0-rc.3",
    "postcss": "^8.4.14",
    "slice-machine-ui": "^0.3.7",
    "tailwindcss": "^3.0.24"
  },
  "dependencies": {
    "gsap": "^3.10.4",
    "vite-svg-loader": "^3.3.0"
  }
}

Phil · May 23, 2022, 1:50pm

Hi Victor,

Slice Machine does not yet support Nuxt 3, but the team is working on this

Thanks.

frank.spee · July 4, 2022, 10:18am

Hi Phil,

is there any news on when Nuxt 3 will be fully supported now they are at RC4?
Or specific for the Slice Simulator and Slice Machine?
Or at least support for the vue-essential-slices?

We really don't want to start a new project now in Nuxt 2 (Vue 2) with prismic.

Greetings,
Frank

Phil · July 4, 2022, 2:22pm

Hi Frank,

Welcome to the community!

So I don't have any hard dates on anything but here's what I know:

Vue 3 SDK: it's in beta and will be published as latest in July.
Nuxt 3 SDK: it's in alpha and will be published in beta next week. It supports everything and is as "prod ready" as Nuxt 3 is (RC-ish)
Slice Simulator SDK: SDK for Vue 3 is available under @prismicio/slice-simulator-vue3 and is "prod ready"
Slice Machine will have Vue 3 / Nuxt 3 support end of Summer.
vue-essential-slices is pretty much deprecated at this stage.

So basically:

The SDKs are ready.
Slice Machine support is under construction.
The docs are under construction.

Thanks.

frank.spee · July 5, 2022, 1:10pm

Thank you for your quick and clear response! We are looking forward to the new releases, and will continue to use the Nuxt 3 packages. We do have something working now

One question comes to mind: When vue-essential-slices will be deprecated will there be a new 'UI library kit' set of components for these standard UI elements, or will they not come back?

I can imagine the latter, as we already are looking into making these custom anyway. This because of we need to be in control of the full lay-out and interactivity of the slices.

Phil · July 7, 2022, 3:35pm

Hey Frank,

I'm happy to help.

There are no plans to revive this library at the minute. Maybe in the future, but it's not in the pipeline.

Thanks.

tadas.majeris · August 18, 2022, 11:02am

Hey Phil,

is it possible to have Slice screenshots/preview on Nuxt 3 ?

I tried adding Slice Simulator page as per:

But still get config errors on step 2 (Update your Nuxt config) and step 3 (Create a page for Slice Simulator).

Phil · August 18, 2022, 2:03pm

It should be yes, but I guess Slice Machine won't let you launch The Simulator because you don't have the required package installed (slice-simulator-vue I guess), because Slice Machine doesn't support Nuxt 3 yet. So unfortunately you'll have to wait until then to use them all together properly.

studiotreble · November 10, 2022, 12:35pm

Hi Phil,

With the stable release of Nuxt 3 being announced for next week (16th November), please could you share an updated status and timeline for stable versions of the various Prismic related Nuxt 3 components, including Slice Machine support?

Thanks,
Alex

Phil · November 14, 2022, 9:51am

Hey @here,

I received the latest from Lucie in our team

Prismix x Vue 3 x Nuxt 3 (Nov. 2022) SDK Vue 3

Released as stable
Doc still on Vue 2, but technical references are available: @prismicio/vue Technical Reference - Documentation - Prismic

SDK Nuxt 3

In RC, like Nuxt 3, will be released as stable alongside Nuxt 3
Doc still on Nuxt 2, but technical references are available: https://v3.prismic.nuxtjs.org

SDK Slice Simulator

Release as stable (@prismicio/slice-simulator-vue3)
Doc still on Nuxt 2, but technical references are available: slice-simulator/README.md at 5f47d0dda5a6189f60b9cee48800202fa1cf453b · prismicio/slice-simulator · GitHub

Slice Machine

No official support for Nuxt 3 nor Vue 3 yet
It's possible to hack its way through, but it's an unpleasant process, and for Prismic-savvy users only, we won't assist with that for now.
There's no official ETA Slice Machine support for Nuxt 3 right now, but hopefully, early Q1 2023.

zoe_steve · April 21, 2023, 3:22am

Hello! @Phil, Is there an ETA on when we'll be able to use slice machine with nuxt 3? You were hopeful for Q1 of this year, we are in Q2 already!

Also with the absence of slice machine, how can I create custom types and slices for my project?

Pau · April 21, 2023, 3:54pm

We will have news about this topic soon, and we encourage all those interested in following us on socials to stay up to date. You can subscribe to our Meetup and check out our progress page What's new - Prismic. We post updates there regularly.

Also, whenever we release these changes, they will be included in the release notes of Slice Machine GitHub.

You can still use the Legacy Builder if you're not using Slice Machine @zoe_steve.