How do I setup a Vue JS project with codekit on mac

Question

Hi I'm new to CLI's how do i setup a vue js project with Codekit on my mac?

Thanks

Answer 1

There aren't a lot of references out there regarding VueJS and Codekit, as you may know. In terms of Vue projects, the vue-cli is a good way to go (may be a little advanced for those new to Vue). It has several templates you can choose from which have automated workflows (transpilation, bundling etc.) baked right in >> Read more

If you want to hit the ground running, you could simply reference the VueJS library in your index.html file. This unpkg link will get you the latest version of the library. Hope this helps. Sorry if I didn't answer to your liking...this is literally my first answer on here.

Answer 2

Vue is a 'normal' javascript library, and therefore can be imported into your projects the same way you'd import other modules, libraries and frameworks - like jQuery. Have a look at the video in the CodeKit website titled "Javascript Bundling", or read the Rollup page in the CodeKit manual - it explains the process really well. This allows you to use Vue-style javascript in your projects, as well as import existing, pre-compiled Vue UI components that you can find around the web.

As you learn Vue, however, you will find that much of the code you're encouraged to write goes into .vue component files. These are self-contained files, which include the HTML, CSS and Vue-style javascript that an element needs to work. These files are usually compiled with the vue-cli tool, and then included in the project. CodeKit is - as of version 3.9.2 - unable to directly compile these complex .vue component files for you. - not out-of-the-box. There is a GitHub Issue about this, and if you'd like the programmer to add this ability to future versions, leave a comment there - the more comments he gets, the more likely he will be to add it soon.

Lastly, if you really want to try to compile your .vue files with CodeKit, you can get CodeKit to treat them as if they were written in a custom language. This is the only way to get CodeKit to auto-process them for you, but will require you to: install Node, vue-cli and any other Vue-related tools you may need, and then setup the custom processing in the CodeKit preferences. If you're going through all this trouble, however, you may as well try to just use the command-line directly... I hope this helps!