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
- Agility CMS has a free tier - sign up for it now
- choose the Blog template.
Step 2 - Clone the Repository
- All the code you need to get started is on GitHub
- Clone it now: https://github.com/joelvarty/agility-vue-app
git clone https://github.com/joelvarty/agility-vue-app
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
Step 4 - Use the React guide
- There's a startup guide that walks you through everything in React, but it actually translates pretty well to Vue.js.
- Read that here: https://help.agilitycms.com/hc/en-us/articles/360031121692-Using-Agility-CMS-with-Create-React-App-CRA-
- Once you have your GUID and API Keys plugged in, you should be able to make changes in the Agility Content Manager and see them reflected in your local project.
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
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)