Nuxt.js Slice Machine Project Setup

[david3 (David Champion)]

Hello. I'm following this article in order to start my first CMS site. There's me worrying about asyncData and I can't even start Slice Machine

Having created my first slice, I can get as far as this next command which does execute successfully

prismic sm --add-storybook

But it's the next one

prismic sm --develop

My terminal greets me with

[slices API]: Unauthorized

My Prismic login doesn't work here, I did see a couple of threads on this. One suggested logout and login, done that no success. One had trouble with Node but after updating that to the latest still no change. The other said to check the sm.json, my apiEndpoint seems O.K:

{
  "libraries": [
    "@/slices",
    "vue-essential-slices"
  ],
  "apiEndpoint": "https://api.slicemachine.dev/2020-10-27",
  "storybook": "http://localhost:3003"
}

Could the fact that I am setting this up on an external hard drive be a key factor? That's the only thing I'm doing that's not normal I guess. Everything else seemed to install, however. Everything in the step-by-step article for Nuxt and Prismic.

Package.json if it's any use:

"scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "storybook": "nuxt storybook",
    "build-storybook": "nuxt storybook build"
  },
  "dependencies": {
    "@nuxtjs/prismic": "^1.2.6",
    "@prismicio/vue": "^2.0.11",
    "core-js": "^3.9.1",
    "nuxt": "^2.15.3",
    "nuxt-sm": "0.0.6",
    "prismic-javascript": "^3.0.2",
    "vue-essential-slices": "^0.3.0",
    "vue-slicezone": "0.0.30"
  },
  "devDependencies": {
    "@nuxtjs/storybook": "^3.3.1",
    "babel-loader": "^8.2.2"
  }

Appreciate any help and support.

Repo here.

[Phil (Phil Snow)]

Hi David,

Welcome to the community!

It seems the issue here is that the API endpoint defined in your sm.json file isn't a prismic repo:
https://bitbucket.org/daxchdesign/dcd-holding/src/master/sm.json

You also don't have anything defined for the prismic module in your nuxt.config.js file:
https://bitbucket.org/daxchdesign/dcd-holding/src/master/nuxt.config.js

You might want to look at this example project which has things pre-configured:

prismicio/nuxtjs-website

Also, the article you linked is the second in a series so you should start from the 1st:

Configure Your Project with Nuxt.js

Let me know if you have any other questions.

Thanks.

[david3 (David Champion)]

Hi Phil, thank you for your response.

I did start from the first one though, from where you first install Nuxt and create the app. Shouldn't this have done everything for me that you mentioned? If I am to copy the Nuxt.config.js file from your link and rebuild will this likely resolve the issue?

[Phil (Phil Snow)]

Yes, it should have updated the nuxt config, but there's no way it would have added the endpoint which you have in the sm.json, so I'm confused.

[david3 (David Champion)]

I didn’t just conjure that from nowhere. It updated it for sure. I’m going to try again from scratch and see. Thanks for your prompt response.

[Phil (Phil Snow)]

No problem we'll work through this together

[david3 (David Champion)]

I have tried again, Phil - deleted the repo. Started from the link you sent, with the same result.

This is the apiEndpoint that's added:

"apiEndpoint": "https://api.slicemachine.dev/2020-10-27",

May I please politely ask you to try creating a Nuxt app following the article to see if I am indeed going mad?

Perhaps I am doing some settings incorrect in the article it says "It will ask you some questions (name, Nuxt options, UI framework, TypeScript, linter, testing framework, etc.)." I wonder what these settings should be for Nuxt seeing as the Nuxt.config.js you added has CSS references etc or is this added by another command?

[david3 (David Champion)]

Me again, Phil - I have just tried this on another machine with success! Wahooo. No idea what is wrong with the other machine. Out the window, it goes. Thanks for your support!

[Phil (Phil Snow)]

I'm glad you got this working, if already had this "apiEndpoint": "https://api.slicemachine.dev/2020-10-27", then running the --setup command wouldn't overwrite this.

I think the create nuxt questions are a bit confusing so I will make a change to using a boilerplate project in this tutorial series soon, which should be much easier.

Let me know if you have any other questions.