Skip to content

Vue.js

Creating a new project with the Vue CLI

Perhaps, the easiest way is to just install the vue-cli:

yarn global add @vue/cli
# or
npm install -g @vue/cli

and then create your project template right away:1

vue create hello-world

Warning

You might find a lot of tutorials online using the vue init webpack project_name command instead. As far as the documentation is concerned, this is already a legacy (Vue CLI 2) approach, and I would not recommend using it for new projects. Instead, stick to the much easier Vue CLI >= 3 approach described above2.

Working with TypeScript

When working with TypeScript, make sure that your components also extend from Vue. Othewise, you can get a pretty nasty message by the TS compiler that this.$store or anything else that you might expect to be accessible inside your Vue component, is actually undefined.

So insted of this (vanilla JS):

<script>
  export default {
    // code goes here...
  };
</script>

use this (TypeScript):

<script lang="ts">
  import Vue from 'vue' export default Vue.extend(
  {
    // code goes here
  })
</script>