Getting started with the Vue.js starter project

Prismic makes it easy to get started on a new Vue.js project by providing a Vue.js starter project.

Clone the Prismic Vue.js starter

First step is to clone the Prismic Vue.js starter in your local environment. Open a terminal (command prompt or similar on Windows) and run the following command:

Copy
git clone https://github.com/prismicio/vuejs-starter

Or if you prefer you can directly download it as a ZIP archive.

Install the depencencies

Next, navigate to the root directory of the Vue.js starter in your local environment and run the following command:

Copy
npm install

Launching your local server

Then you can launch your local server, for that run the following command:

Copy
npm run serve

You can now open your browser to http://localhost:8080. You should see a tutorial page explaining how to create a Vue component with content managed in Prismic.

Pagination of API Results

When querying a Prismic repository, your results will be paginated. By default, there are 20 documents per page in the results. You can read more about how to manipulate the pagination in the Pagination for Results page.

And your Prismic journey begins!

Now you're all set to start building your Vue.js project with Prismic content management. Here are the next steps you need to take.

Create a Prismic repository

A Prismic repository is where you define, edit and publish content. If you haven't a repository yet, we invite you to create one now.

Define your Custom Types

In your Prismic repository you'll need to model your pages, posts, events, etc. into your Custom Types. Refer to our content modeling tips website to learn more about constructing your Custom Types.

Query your documents

After you've created and published some documents in your Prismic repository, you'll be able to query the API to retrieve your content. We provide explanations and plenty of examples of queries in the Query the API section of the documentation. Start by learning more on the How to Query the API page.

Integrate content into your templates

The last step is to integrate the content into your templates. Check out the Templating section of the documentation to learn more.