Slice Simulator Nuxt 3

Developing with Prismic
,
1

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)
2

Hi Tadas,

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

Thanks.

1 Like
3

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"
  }
}
6

Hi Victor,

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

Thanks.

3 Likes
8

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

11

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.

13

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 :slight_smile:

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.

14

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.

16

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).

17

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.

21

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

1 Like
23

Hey @here,

I received the latest from Lucie in our team :slight_smile:

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

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

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.