Unable to create slice machine in project

Developing with Prismic
,
1

I'm trying to integrate nuxt 3 and prismic when I choose to create a repository using nuxt it asks to go through several steps and for me to enter several slice related commands in my existing project however the dependencies are for nuxt 2. How do I get around this?

I'm using nuxt 3.10

2

Hi @bastianh86 ,

Welcome to the community :slight_smile:

You can find the instructions for creating a project with Nuxt 3 here:

The npx @slicemachine/init@latest command should recognise that you're building a project in Nuxt 3.

Let me know what packages it installs.

3

this command: ```
npx @slicemachine/init@latest

provides me this
Could not resolve dependency:
npm ERR! dev @slicemachine/adapter-nuxt2@"0.3.38" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: nuxt@2.17.3
npm ERR! node_modules/nuxt
npm ERR! peer nuxt@"^2.0.0" from @slicemachine/adapter-nuxt2@0.3.38
npm ERR! node_modules/@slicemachine/adapter-nuxt2
npm ERR! dev @slicemachine/adapter-nuxt2@"0.3.38" from the root project

It looks like it is trying to install the nuxt2 version of the slicemachine and not the version for nuxt 3

4

i'm also getting this message with the slicemachine command:

Slice Machine → Initializing

:information_source: We collect telemetry data to improve user experience.
Learn more: What Is Slice Machine? - Documentation - Prismic

:heavy_check_mark: Detected framework Nuxt 2 and package manager npm
:heavy_check_mark: Began core dependencies installation with npm ... (running in background)
/ Logging in to Prismic...

although my nuxt version is:

"nuxt": "latest" (nuxt: 3.11.2)

6

Installed Slice-machine locally and seperately into my existing Nuxt 3 project because of issues with slice-machine@init command incorrectly detecting Nuxt 2.

Errors

npm run slicemachine

meeovi@0.0.6 slicemachine
start-slicemachine

'start-slicemachine' is not recognized as an internal or external command,
operable program or batch file.

Your Role

Developer

Hosting provider

Locally

Steps to reproduce

follow steps from here:

slice-machine-ui Technical Reference - Documentation - Prismic

7

Hey @bastianh86 ,

Can you:

  • Show me your full package.json?
  • Tell me what version of npm you're using?
  • Tell me if this is an existing or new Nuxt project?

Thanks.

8

npm 10.5.2
existing Nuxt

{
  "name": "example",
  "type": "module",
  "version": "0.0.6",
  "description": "This is a storefront for example.",
  "author": "Sebastian (https://www.sebastianhilton.com)",
  "homepage": "https://www.example.com",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/example/example-frontend"
  },
  "bugs": {
    "url": "https://github.com/example/example-frontend/issues"
  },
  "license": "MIT",
  "private": true,
  "scripts": {
    "alternate-commit": "git add . && git commit -m \"ready for update\"",
    "alternate-update": "git pull \"https://github.com/example/example-frontend\"",
    "build": "nuxt build",
    "dev": "nuxt dev --port 3011",
    "ts-node": "ts-node -r tsconfig-paths/register --compiler-options '{\"module\":\"CommonJS\"}'",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "analyze": "nuxi analyze",
    "slicemachine": "start-slicemachine",
    "gql-generate": "npx gqlg --schemaFilePath apollo/cms/schema.graphql --destDirPath apollo/cms/queries-mutations_subscriptions --depthLimit 2",
    "all": "npm-run-all --parallel dev start"
  },
  "devDependencies": {
    "@nuxt/content": "latest",
    "@nuxt/image": "^1.3.0",
    "@nuxt/types": "latest",
    "@nuxtjs/apollo": "next",
    "@nuxtjs/kinde": "^0.1.9",
    "@nuxtjs/prismic": "^3.2.1",
    "@nuxtjs/turnstile": "^0.7.1",
    "@nuxtus/nuxt-module": "^2.4.0",
    "@slicemachine/adapter-nuxt": "^0.3.38",
    "@tinymce/tinymce-vue": "latest",
    "@types/graphql": "^14.5.0",
    "@types/node": "^20.11.13",
    "graphql": "^15.8.0",
    "npm-run-all": "^4.1.5",
    "nuxt": "latest",
    "nuxt-meilisearch": "^1.1.0",
    "nuxt3-leaflet": "^1.0.12",
    "sass": "^1.72.0",
    "ts-node": "latest",
    "typescript": "^5.4.3"
  },
  "dependencies": {
    "@directus/sdk": "^11.0.2",
    "@directus/types": "^11.0.8",
    "@fortawesome/fontawesome-svg-core": "^6.2.1",
    "@fortawesome/free-solid-svg-icons": "^6.2.1",
    "@fortawesome/vue-fontawesome": "^3.0.2",
    "@meilisearch/instant-meilisearch": "^0.17.0",
    "@storyblok/nuxt": "^6.0.10",
    "@stripe/stripe-js": "^3.1.0",
    "cross-var": "^1.1.0",
    "dotenv": "latest",
    "dotenv-cli": "^7.3.0",
    "express": "^4.19.2",
    "instantsearch.css": "^8.1.0",
    "jquery": "latest",
    "lodash-es": "latest",
    "meilisearch": "^0.38.0",
    "nuxt-gtag": "^1.1.2",
    "nuxt-i18n": "latest",
    "nuxt-simple-sitemap": "^4.4.1",
    "stripe": "^14.23.0",
    "video.js": "latest",
    "videojs-contrib-ads": "^7.1.0",
    "videojs-contrib-quality-levels": "latest",
    "videojs-share": "^3.2.1",
    "vue-slider-component": "^3.2.24",
    "vue-tsc": "^1.8.22",
    "vuetify": "latest",
    "vuex": "^4.1.0"
  }
}
10

Thanks for sharing your package.json. I think the command will work if you delete your node module and reinstall everything because your project might still be using Nuxt 2. You can confirm in the package-lock.

But if you don't want to do that, I would suggest uninstalling anything related to Prismic and then adding the following dependencies:

  "devDependencies": {
    "@nuxtjs/prismic": "^3.1.1",
    "@slicemachine/adapter-nuxt": "^0.3.38",
    "nuxt": "^3.11.1",
    "slice-machine-ui": "^1.26.0"
  }

You can use this command to do that:

npm install --save-dev @nuxtjs/prismic@^3.1.1 @slicemachine/adapter-nuxt@^0.3.38 nuxt@^3.11.1 slice-machine-ui@^1.26.0
12

that worked thank you, not quite sure maybe because I pinned latest instead of the exact nuxt version.

1 Like