This article will walk you through the best way to using Prismic with Vue.js applications. The example projects provide a collection of pre-built sample content, Custom Types, source code, and more. It will guide you on how to build an application and explore various features and capabilities of Prismic.
Install the Prismic CLI
The first thing is to install the Prismic CLI (command line interface), if you haven't already. Launch the terminal (command prompt or similar on Windows) and run the following command.
npm install -g prismic-cli
yarn install -g prismic-cli
⚠️ Prismic CLI version
Make sure you're using the latest version of Prismic CLI. You can check your version by running prismic --version command in your terminal.
Choose a project
You can choose any of the available sample projects. You can also see a preview of the project to check how the application works.
Run the theme command
To install a sample project, run the theme command. The theme command clones the project locally, installs all necessary dependencies and creates a Prismic repository with Custom Types and pre-built content. It will ask you to give the name of your Prismic repository and the local folder to initialize your project.
- Blog website
- Business website
prismic theme --theme-url https://github.com/prismicio/vuejs-blog.git --conf public/index.html
prismic theme --theme-url https://github.com/prismicio/vuejs-website.git --conf public/index.html
Verify repository name
Open prismic-configuration.js file and verify the Prismic repo matches the URL of the Prismic repository created earlier in this article. To find this, go to your Prismic dashboard, then to your repository.
If the URL for your repository is https://my-awesome-repository.prismic.io, then you'll need to replace your-repo-name with my-awesome-repository.
Run the website in development mode
Now, open your project folder in the terminal and run the following command to launch a local development server at http://localhost:8080.
npm run serve
Now you can customize the code and content however you want, and deploy your project when you're ready.
Was this article helpful?
Can't find what you're looking for? Get in touch with us on our Community Forum.