Nuxt storybook error

I started a project using nuxt and prismic. I followed your guide Getting started with the Nuxt.js & Prismic - Prismic.
But i tried to install storybook before creating a slice which gave me an error so I created a slice and then ran the prismic --add-storybook and it said it is already installed. I have the folder and everything in the project.

So I ran yarn run storybook, which starts localserver but when I open localhost:3003 it only says cannot get

I dont know how to debug this. What can be the problem?

Hi victor,

Welcome to the Prismic community,
I will try to debug this issue with you. To do so, can you tell me what is the node version you are using as well as the Prismic CLI you can get that as the following

node -v
prismic --version

In fact, you need to be on the latest version of node and Prismic!

And In order to investigate further this issue, I would need to have access to your code or some code snippets (you can share in a private message if necessary)

Looking forward to your reply,
Fares

Hey :smiley:
Im currently on node v14.4.0
and prismic 3.8.10.

What kind of snippet would you like?

nuxt.config.js

export default {
  // Target: https://go.nuxtjs.dev/config-target
  target: "static",
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: "xxx",
    meta: [
      {
        charset: "utf-8",
      },
      {
        name: "viewport",
        content: "width=device-width, initial-scale=1",
      },
      {
        hid: "description",
        name: "description",
        content: "",
      },
    ],
    link: [
      {
        rel: "icon",
        type: "image/x-icon",
        href: "/favicon.ico",
      },
    ],
    script: [
      {
        src:
          "https://cdn.polyfill.io/v2/polyfill.min.js?features=Element.prototype.classList",
      },
      {
        src:
          "https://cdn.jsdelivr.net/npm/focus-visible@5.0.2/dist/focus-visible.min.js",
      },
    ],
  },
  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [],
  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [],
  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,
  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/tailwindcss
    "@nuxtjs/tailwindcss",
    "@nuxtjs/svg",
  ],
  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/pwa
    "@nuxtjs/pwa",
    [
      "@nuxtjs/prismic",
      {
        endpoint: "xxx",
        apiOptions: {
          routes: [
            {
              type: "page",
              path: "/:uid",
            },
            {
              type: "home",
              path: "/",
            },
          ],
        },
      },
    ],
    ["nuxt-sm"],
  ],
  // PWA module configuration: https://go.nuxtjs.dev/pwa
  pwa: {
    manifest: {
      lang: "sv",
    },
  },
  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    transpile: ["vue-slicezone", "nuxt-sm"],
  },
  storybook: {
    stories: ["~/slices/**/*.stories.js"],
  },
  ignore: ["**/*.stories.js"],
};

sm.json
{
"apiEndpoint": "https://vamospadelclub.cdn.prismic.io/api/v2",
"libraries": [
"@/slices"
],
"_latest": "0.0.45",
"storybook": "http://localhost:3003"
}

my teaser slice index.stories.js

import SliceZone from "vue-slicezone";
import model from "./model";
import mocks from "./mocks.json";
import Slice from "./";

export default {
  title: model.name,
};

// TODO: Update to loop over mocks.json
export const DefaultSlice = () => ({
  components: {
    Slice,
    SliceZone,
  },
  data() {
    return {
      mock: mocks[0],
      resolver() {
        return Slice;
      },
    };
  },
  template: '<slice-zone :slices="[ mock ]" :resolver="resolver" />',
});

DefaultSlice.storyName = mocks[0].name;

1 Like

Hi Victor,

I apologize for the long delay. This thread wasn't tracked correctly.

I don't know if you have managed to solve this issue; otherwise, maybe you can have a look at this document of how to install/configure Storybook manually.

Please let us know if you still need help to try to troubleshoot this issue with you.

This thread has been closed due to inactivity. Flag to reopen.