Strapi Starter Vue Blog

This starter is outdated. We redirect you to the list of maintained v4 starters.

If you are familiar with our blog you must have seen that we've released a series of tutorials on how to make blogs using Strapi with a lot of frontend frameworks: Gatsby Old, Gatsby new, React, Next.js, Vue, Nuxt or Angular.

We thought that it would be a good idea to provide the result of these tutorials as starters for those who'd like to bootstrap a simple blog application with Strapi and their favorite frontend framework.

We already released the React Starter and the Gatsby Starter, and we keep moving with the Vue Starter

Why did we make these starters?

Starters allow you to quickly visualize the result of the association between Strapi and your frontend framework.

It's easier and faster to dig into an existing application to get an idea of ​​the product than to start an application from scratch.

As we've made tutorials on how to make a blog with this or that framework, it seemed useful for the Strapi community to use the resulting application in order to create starters.

So to get started with the starter, you have two options:

• You can start by installing the starter and then following the tutorial to reproduce it and learn on the way.

• Or you can run the starter to directly test the application.

So, let's see how to run it!

Vue starter for creating a blog with Strapi.

This starter allows you to try Strapi with Vue with the example of a simple blog. It is fully customizable and due to the fact that it is open-source, fully open to contributions. Do not hesitate to add new features etc ...

You may want to know how to develop such a starter on your own! This starter is actually the result of this tutorial

Deploy the backend

To deploy the Strapi instance you'll need:

• An Heroku account for free
• A Cloudinary account for saving images for free

Once you have created these accounts you can deploy your instance by clicking on this button

Here is the repository of the backend of this starter

Deploy the frontend

On Netflify

Coming soon...

On Vercel

Coming soon...

Features

• 2 Content types: Article, Category
• 2 Created articles
• 3 Created categories
• Permissions set to true for article and category
• Responsive design using UIkit

Pages

• "/" display every articles
• "/article/:id" display one article
• "/category/:id" display articles depending on the category

Getting started

Backend

See full instructions here

Frontend

git clone https://github.com/strapi/strapi-starter-vue-blog.git
cd strapi-starter-vue-blog

Start the frontend server

# Using yarn
yarn install
yarn develop

# Using npm
npm install
npm run develop

Vue server is running here => http://localhost:8080

If you liked it, it would be great to share the word 📣 And let me know what you thought of it in the comments below.

Enjoy this starter!

Please note: Since we initially published this blog post, we released new versions of Strapi and tutorials may be outdated. Sorry for the inconvenience if it's the case. Please help us by reporting it here.

Get started with Strapi by creating a project using a starter or trying our live demo. Also, join our academy to become a Strapi expert, and consult our forum if you have any questions. We will be there to help you.