This page covers how to use Prismic + Nuxt Multi-Page Starter with Prismic.
- Demo: Open live demo
- Learn more about Prismic and Nuxt: Prismic Nuxt Documentation
To start a new project using this starter, run the following commands in your terminal:
npx degit prismicio-community/nuxt-starter-prismic-multi-page your-project-name
cd your-project-name
npx @slicemachine/init@latestThe commands will do the following:
- Start a new Nuxt project using this starter.
- Ask you to log in to Prismic or create an account.
- Create a new Prismic content repository with sample content.
When you're ready to start your project, run the following command:
npm run devTo learn more about working with Prismic, see the Prismic docs.
To get started after creating your new project, go to prismic.io/dashboard, click on the repository for this website, and start editing.
To create a page, click on the green pencil icon, then select Page.
Your new page will be accessible by its URL, but it won't appear on the website automatically. To let users discover it, add it to the navigation.
To add a page to your navigation menu, go to the document list and open the Navigation document. In the Links group, click Add a new element in Links. Select the page to add and fill in a label.
In your repository, go to Settings > Previews. Under Create a New Preview, fill in the three fields:
- a name (like Development or Production)
- the domain where your app is running (like http://localhost:3000 or https://www.yoursite.com)
/api/previewfor the Link Resolver
Now, go to a draft document and click the eye icon in the top-right corner.
To learn more about how to configure previews, read Preview Drafts in Nuxt in the Prismic documentation.
This website is preconfigured with Prismic. Functionality is provided by the @nuxtjs/prismic package, which makes Prismic utilities available throughout the app. Take a look at the code to see how it's used.
There are two steps to rendering content from Prismic in your Nuxt project:
- Fetch content from the Prismic API
- Template the content
Here are some of the files in your project that you can edit:
nuxt.config.ts- Theprismicproperty includes configurations for@nuxtjs/prismic.pages/index.vue- This is the app homepage. It queries and renders a page document with the UID (unique identifier) "home" from the Prismic API.pages/[uid].vue- This is the page component, which queries and renders a page document from your Prismic repository based on the UID.slices/\*/index.vue- Each Slice in your project has an index.js file that renders the Slice component. Edit this file to customize your Slices.
These are important files that you should leave as-is:
pages/slice-simulator.vue- Do not edit or delete this file. This file simulates your Slice components in development.slices/- This directory contains Slice components, which are generated programmatically by Slice Machine. To customize a Slice template, you can edit the Slice'sindex.jsfile. To add Slices, delete Slices, or edit Slice models, use Slice Machine (more info below).
Learn more about how to edit your components with Fetch Data in Nuxt and Template Content in Nuxt.
Styling in this project is implemented with Tailwind CSS. See the Tailwind docs for more info.
To put your project online, see Deploy your Nuxt App.
This project includes an application called Slice Machine, which generates models for your Custom Types and Slices. Slice Machine stores the models locally in your codebase, so you can save and version them. It also syncs your models to Prismic. To learn how to use Slice Machine, read Model Content in Nuxt.
If you change or add to your Custom Types, you'll need to update your route handling to match. To learn how to do that, read Define Paths in Nuxt.
For the official Prismic documentation, see Prismic's guide for Nuxt or the technical references for the installed Prismic packages.