Want to see an example of a multi-page Vue website using Prismic? Look no further! 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.

1. Launch the project

First, Install the prismic-cli package. Launch a terminal instance and run the following command to install the package globally.

npm install -g prismic-cli

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

⚠️ Prismic CLI version

Make sure you're using the latest version of the CLI, which you can check on npm; otherwise, the theme command won't add any Custom Types or Content correctly to the newly created repository.

Check your version by running prismic --version command in your terminal.

Once it's been installed, navigate where you want to create your new project folder and run the following command:

prismic theme --theme-url https://github.com/prismicio/vuejs-website.git --conf public/index.html

This will create a new Prismic content repository, set up the custom types, create a few documents, and install the project code.

2. Run the website

Now, open your project folder in the terminal and run the following command:

npm run serve

Then this next command will launch a local development server at http://localhost:8080. Now all of your content is displayed!

3. Deploy & go live!

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

And that's it deploy your website, and you're live.

Customize to your liking

You can now edit the stylesheets and the templates to fit your design!

Did this answer your question?