Integrating content management into your Vue.js projects with Prismic

Prismic Vue.js starter project

Prismic is a headless API-based CMS for websites and apps. It can easily integrate with existing systems and your existing projects, providing a development kit for different languages or frameworks (Javascript, PHP, Ruby, Java, .NET & NodeJS, React, Vue.js, Laravel). Taking care of upgrades, maintenance and security Prismic has many companies using it, learn how they help companies with their needs through the use cases.

A content management system (CMS) manages the creation and modification of digital content.

Keeping up with the rapid development of Vue.js the team has created support for Vue.js developers who need to integrate content management into their projects. There's a Vue starter project, a plugin, and tons of docs on integrating Prismic into projects.

Get started on a new Vue.js project with Prismic

You can start by using the Vue.js starter project. Simply define, edit and publish your content in a Prismic content repository, query and fetch content from our API, then integrate the content into your components.

Clone the Prismic Vue.js starter

The 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:

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

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

Install the dependencies

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

npm install

Launching your local server

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

npm run dev

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.

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.

Define your Custom Types

First, you'll need to model your pages, posts, events, etc. into your Custom Types. Refer to the user guides to learn more about constructing your Custom Types thanks to the drag-n-drop builder.

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. Find explanations and plenty of examples of queries in 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.

The 1-user repository is free with all core writing room features.

You can find the team on Twitter: @prismicio.