Configure Your ProjectBeta

We'll be getting everything we need for this tutorial series setup and prepared. This includes downloading the initial project files, launching a Prismic repository, and installing the required dependencies.


Before you start - Node Version

For this project to work correctly, you will need to have at least version 12.16.1 of node installed on your machine. You can check this by running the node -v command in your terminal.

1. Install Node

Node.js is used to power most modern Javascript frameworks to help you build websites fast and easily. Using Node.js, you can work with Javascript outside the browser. NPM (Node Package Manager) is used to install the various node dependencies used to power the Slice Machine. Luckily this installation process is something that is very well documented already.

So we'll allow William Vincent and his slick tutorials to take you through the process.


2. Create a New Default Nuxt App

The next thing you'll need to do is download a default Nuxt.js app to build on top of. Do this by running the following command (You can see the full guide for creating a Nuxt app here):

  • npm
  • Yarn
  • npx
Copy
npm init nuxt-app my-new-nuxt-app
Copy
yarn create nuxt-app my-new-nuxt-app
Copy
npx create-nuxt-app my-new-nuxt-app

It will ask you some questions (name, Nuxt options, UI framework, TypeScript, linter, testing framework, etc.). To find out more about all the options see the Create Nuxt app. Once all questions are answered, it will install all the dependencies for the default Nuxt.js app.

To see your newly create Nuxt.js app navigate to the project folder and launch it:

  • npm
  • Yarn
Copy
cd my-new-nuxt-app && npm run dev
Copy
cd my-new-nuxt-app && yarn dev

3. Install the Prismic CLI

So now we'll install the Prismic CLI (command line interface), if you haven't already. This tool will allow you to interact with Prismic from your local machine for things like creating repositories. To install it globally run the following command.

  • npm
  • Yarn
Copy
npm install -g prismic-cli
Copy
yarn global add prismic-cli

Sometimes it's possible that a global (-g) command like this doesn't work because of permission levels on your machine.

If that's the case for you, try executing the sudo command below:

  • npm
  • Yarn
Copy
sudo npm install -g prismic-cli
Copy
sudo yarn global add prismic-cli

CLI Version

You will need to make sure you're using the latest version of the CLI, which you can check on npm. (Check your version by running prismic --version).

4. Sign in to Prismic with the CLI

If You Don't Have a Prismic Account

After installing the CLI you should be able to create a Prismic account by running the following command:

Copy
prismic signup

If You Already Have a Prismic Account

After making sure that you have the correct version of the CLI, you can log in to Prismic by running the following command.

Copy
prismic login

5. Run the Prismic Setup Command

The following command will automagically configure your project with tools to start your Prismic development journey.

Copy
prismic sm --setup

What Does This Command Do?

This command does a lot of different things for you including:

  • It automatically connects our default Component Library and adds any necessary dependencies to use the tool. This is done by adding extra configurations to your nuxt.config.js file. You can see what exactly this does and how to configure this file manually here.
  • Adds the sm.json file with the default configuration.
  • Creates a Prismic repository, with a standard "Page" custom type. This is where all the content for your project will be kept and where you can choose the content models (Slices) that will correspond to your components in the frontend of your project. Learn more about Prismic.
  • You will receive a confirmation email with a link to your new repository, or you can also go directly to your Dashboard.
  • Installs dependencies required by Slice Machine and the library you selected, like node-sasssass-loadervue-essential-slices and slicebuilder-ui (used to build you content models locally).
  • Installs libraries to fetch and display Prismic data: @prismicio/vue@nuxtjs/prismic and nuxt-sm.


Next and Previous articles