Setting up VueJS in a Craft CMS Project

Question

Trying to better my skills and take a simple Craft-driven website to a more modern level with some VueJS. I'm still very much learning Vue.

The course I've been following recommends using vue-cli to create an app, and it runs it's own development server. I've done this and things work well. However, I'm not sure the best way to integrate that with Craft. Do I run the vue create project-name inside of my Craft project? What does that do for the development server? I'm currently using MAMP for Craft, do they clash?

I would like to eventually get to a point where I use GraphQL and then in theory my Vue app can live elsewhere and this is not a problem. However, whilst I'm learning I just want to add some very basic things to my existing site, like responsive menu toggles, dropdown menus etc. I understand I could just use the CDN and do things that way, but then I'm not sure of the best approach to take with templates and components etc.

As you can probably tell, very much at a beginner level so I would appreciate any thoughts. I've read LOTS of guides, but none seem to really answer these questions.

Many thanks in advance!

Answer 1

They don't need to clash per se, but it depends on the way you build your project structure. I'm front-end focussed, so my setup is like:

    projectfolder
      src
      public

public

(you could also call this 'craft' or 'dist' or another name to indicate this is the final product) This is where Craft is installed with the craft installer. So nothing Craft related will be outside that folder and therefor should not crash with the vue installer.

src

Src countains all front-end source files, like es6 javascript files, Scss files, static assets, fonts etc. I use webpack to transpile these to a folder inside public\web, so the destination files will always be inside public\web and therefore available for use in templates.

using the vue installer?

The vue installer is probably mostly/only focussed on projects where you only use front end. But apart from that; it has it's own project structure you probably can't change. You might be able to find a way to use the installer and make the created structure work with Craft, but you still need other tools, like webpack, to make it work without having all front end sources inside the folders created with the craft installer.

So my advise

is leave that installer and learn how to create your own structure. That way you are way more flexible, don't need to use their rules and can leave things behind you don't need and add your own config. In the end you will install more front-end tools and configuration files for linters, transpilers etc. anyway and you can't do that with the vue installer alone. So just create your own setup with all your configs and use that for every new project would be my advise.