Sample multi-page website with navigation

Want to see an example of a multi-page Nuxt website using Prismic? Look no further! 

We worked hard with the team over at Nuxt.js to bring you this updated sample that allows you to run both our technologies together seamlessly. You'll now be able statically build your website and use Prismic previews in this mode.


In this project, we provide all the code you need for a personal website with a homepage, information pages, and a navigation. Let's see how to set up Prismic to get this up and running.

Install the Prismic Command Line Tool

To get started with your website, install the command line tool. It allows you to quickly start JavaScript projects that access your Prismic backend.

If you don't already have it, make sure to first install npm on your machine.

Fire up a terminal (command prompt or similar on Windows) and run the following command.

npm install -g prismic-cli@3.8.3-beta.0

Sometimes it's possible that this command doesn't work. If that's the case for you, try executing a sudo command:

sudo npm install -g prismic-cli@3.8.3-beta.0

Run the Theme command

The Prismic command is now available globally. We will now use that tool to launch this tutorial project. In the terminal, navigate to the location you want to launch your project and run the following command. This command should configure your project, connect you to a new Prismic repo and install all the node modules.

prismic theme --theme-url --conf sm.json


The prismic theme command will initialize a Nuxt.js project that is configured to connect with the repository you just created!

Run Storybook

Now that everything is installed you should preview you components that you have available to play with in Storybook. This awesome feature will allow you to view you won components when you get to that stage. Get it up and running with the following command:

npm run storybook

Run The Slice Builder & Push Your Slices

Next you will need to push all these awesome prebuilt Slices to your Prismic repo. To do this you'll need to launch The Slice Builder, this tool will allow you to create Slice models for your components locally and then send them to your Prismic repo. Launch it with the command below, this command will log you in to Slices API and launch the builder:

prismic sm --develop

Now once you're greeted by the home screen you can enter each Slice and push each one to Prismic to use. You can learn more about The Slice Builder here.

Write some content

Start by creating three pages: a homepage and two regular pages.

Go to Content, hit New, and select the Homepage type. Fill in the content for the homepage banner, then add slices to add the page content.

Save and publish!

Now, create two information pages. Go to Content, hit New, and select the Page type. Make sure to fill the mandatory UID field that is used for that page's URL. Add some content slices, then save and publish!

Fill in the menu

Let’s fill in the menu with your pages.

Go to Content, hit New, and choose the Menu type. Give the menu a title, and add all your pages.

For each page you want to add to the navigation bar: 

  1. Add a Link Label 
  2. Click on Link, then “What kind of link do you want to insert?,” select “Link to a Document,” and select the appropriate page.

Save and publish!

Run the app

Time to see things working! 

Go back to terminal (command prompt or similar on Windows), point it to your project location (cd your-project-folder) and run!

npm run dev

This will launch a local development server at http://localhost:3000.

Deploy & go live!

If you want to deploy your website, Netlify is a great option, as it allows you deploy as both a SPA and a Statically built website. Simply follow the instructions on the Nuxt.js website on how to deploy on Netlify.

Deploy on Netlify

And that's it deploy your website and your live.

Customize to your liking

You should easily find what to modify in the code to customize the website: just edit the stylesheets and the templates to fit your design!

Just curious about the code?

If you aren't interested in recreating this project and would just like to look at the code then you can download the project here.

View the code