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.