Example Nuxt.js Projects

Beta

These docs rely on Slice Machine, which is in active development and subject to change. Content Relationships are not currently supported with Slices.

This article will show you how to get a pre-configured boiler plate project running so you can test all our features fast.


Before you start - Node Version

You need at least Node.js 12.0 or later. Check this by running node -v in your terminal.

1. 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).


2. Install a Sample Project

Now choose from one of the sample projects below. You can see a preview of what the project will look like and then run the theme command for the project. This command will clone the project locally, install any necessary dependencies, create a Prismic repo and populate it with demo content. Then it's just up to you to run it and see your content.

Sample Blog

This sample blog is an excellent starting point to explore Nuxt.js and Prismic. Get it up and running in minutes. Modify and adapt it to your liking; it's all yours!

Run the following command in the terminal to launch this project locally:

Copy
prismic theme --theme-url https://github.com/prismicio/nuxtjs-blog --conf nuxt.config.js

Sample Multi-Page Site with Navigation

Want to see an example of a multi-page website using Prismic? Look no further! This project provides all the code you need for a personal website with a homepage, information pages, and navigation.

Run the following command in the terminal to launch this project locally:

Copy
prismic theme --theme-url https://github.com/prismicio/nuxtjs-website --conf nuxt.config.js

Multi-language website

Want to see an example of a multi-language Nuxt.js website using Prismic? Look no further! In this project, we provide all the code you need for a website with a homepage, information pages, and navigation.

Run the following command in the terminal to launch this project locally:

Copy
prismic theme --theme-url https://github.com/prismicio/nuxt-multi-language-site --conf nuxt.config.js

Slice Machine Boilerplate project

This boilerplate comes without any special extras. It comes with all the basics you need to get a Next.js and Slice Machine project up and running. You can also click the 'Preview' button below to follow our step by step tutorial series that uses the boilerplate.

Run the following command in the terminal to launch this project locally:

Copy
prismic theme --theme-url https://github.com/prismicio-community/slice-machine-starter-nuxt --conf sm.json

Run the builder to start making Slices:

  • npm
  • Yarn
Copy
npm run slicemachine
Copy
yarn slicemachine

Multi-page site with Slice Machine

Want to see an example of a multi-page website using Prismic? Look no further! This project provides all the code you need for a personal website with a homepage, information pages, and navigation.

Run the following command in the terminal to launch this project locally:

Copy
prismic theme --theme-url https://github.com/prismicio-community/nuxt-sm-tutorial-series --conf sm.json

Run the builder:

  • npm
  • Yarn
Copy
npm run slicemachine
Copy
yarn slicemachine

Push your Shared Slices to Prismic

This sample project comes with pre-built Slice Machine components, so you'll need to send the Slices (Content Models) for these components to your newly created Prismic repo. Luckily we've already this article which shows you how to push your Slice to Prismic.


3. Run your project

Now you can run your project with the following command and view your published content locally.

  • npm
  • Yarn
Copy
npm run dev
Copy
yarn dev

Related Articles


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.