Configure a Project Manually

On this page, you will learn how to add the Slice Builder to your project manually. The automated setup adds settings that you might not need. These steps will allow you to customize your project.


⚠️ Prerequisites

Before proceeding, ensure you have:

Install Dependencies

Run the following command:

  • npm
  • Yarn
Copy
npm i @nuxtjs/prismic vue-slicezone nuxt-sm
Copy
yarn add @nuxtjs/prismic vue-slicezone nuxt-sm

And then:

  • npm
  • Yarn
Copy
npm i --save-dev @nuxtjs/storybook slice-machine-ui
Copy
yarn add --dev @nuxtjs/storybook slice-machine-ui

Create Slices directory

Create a slices folder in the root folder: ~/slices.

Renaming your Slices directory

You can rename this directory, but you must also rename it in your sm.json file, described in the next step.


Add sm.json

Create a file in the root folder called sm.json. In this file, paste this code:

Copy
{
  "apiEndpoint": "https://your-repo-name.cdn.prismic.io/api/v2",
  "libraries": ["@/slices"],
  "_latest": "0.0.43",
  "storybook": "http://localhost:3003"
}

Be sure to replace your repo name in the API endpoint.


Add settings to nuxt.config.js

Add the following settings to ~/nuxt.config.js:

Copy
modules: [
  ["@nuxtjs/prismic", {
    "endpoint": "https://your-repo-name.cdn.prismic.io/api/v2",
  }], 
  ["nuxt-sm"]
],
build: {
  transpile: ["vue-slicezone", "nuxt-sm"]
},
storybook: {
  stories: ["~/slices/**/*.stories.js"]
},
ignore: ["**/*.stories.js"]

Again, make sure to replace your repository name in the endpoint.


Add scripts to your package.json

Add these scripts to package.json:

Copy
"slicemachine": "start-slicemachine --port 9999",
"storybook": "nuxt storybook",
"build-storybook": "nuxt storybook build"

Add Storybook to .gitignore

Next, add .nuxt-storybook and storybook-static to .gitignore.


Next Steps

Now you have all the configuration ready to run your project. Next, you can add content to your pages.


Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Get in touch with us on our Community Forum.