DEV Community

Cover image for Using Agility CMS with Vue.js
Joel Varty
Joel Varty

Posted on • Updated on

Using Agility CMS with Vue.js

My colleagues here at Agility CMS have a pretty big rivalry about what's better, React or Vue. Since React has more followers, we started with a "create-react-app" for Agility CMS - see that guide on using that right here, written by the amazing James Vidler.

For those of us who REALLY love Vue.js, I created an initial project template that you can clone from GitHub right now.

Step 1 - Create a Free Agility CMS Account

Step 2 - Clone the Repository

git clone https://github.com/joelvarty/agility-vue-app
Enter fullscreen mode Exit fullscreen mode

Step 3 - Run it Locally

  • If you are at all familiar with Vue.js, you should be able to get it running locally.
  • If you're having trouble, or if you're new to Vue.js, start here
npm install
npm run serve
Enter fullscreen mode Exit fullscreen mode

Step 4 - Use the React guide

Step 5 - BONUS! - Deploy it to Netlify

  • We love Netlify - it's a great tool that also has a free tier (smart!).
  • Again, we've got a React guide for deploying your site to Netlify
  • Read that here: https://help.agilitycms.com/hc/en-us/articles/360032203552
  • Note that Vue.js by default builds to the dist folder, whereas React.js uses the build folder
npm run build
npm install -g netlify-cli
netlify login
netlify deploy --dir=dist --open

Enter fullscreen mode Exit fullscreen mode

Congrats! You've taken the first step towards working with an amazing Headless CMS and an incredibly powerful framework.

I'd really love to hear your feedback in the comments below.

Top comments (0)