Code

Painless Apps with Vue

Using Vue in Visual Studio Code

VolarFast Vue Language Support Extension for VSCdode.
TypeScript Vue Plugin (Volar)TypeScript Vue Plugin (Volar).
VeturSupports Vue.js IntelliSense, code snippets, formatting, and more.
Vue 3 snippetsThis extension adds Vue Snippets into Visual Studio Code.
Vue VSCode snnipets
eslint-plugin-vueVueJS has its own ESLint Plugin to check the syntax of single file components.

Using Vue with TypeScript

Vue is written in TypeScript itself and provides first-class TypeScript support. All official Vue packages come with bundled type declarations that should work out-of-the-box.

Use create-vue

The recommended tooling to start and develop an awesome modern Vue project consist of:

brew install yarn nvm vue-cli vite

Install latest Node LTS version

nvm install --lts
node -v && npm -v && vue -V

# v16.14.0
# 8.3.1
# @vue/cli 5.0.1
Commands:
  create [options] <app-name>                create a new project powered by vue-cli-service
  add [options] <plugin> [pluginOptions]     install a plugin and invoke its generator in an already created project
  invoke [options] <plugin> [pluginOptions]  invoke the generator of a plugin in an already created project
  inspect [options] [paths...]               inspect the webpack config in a project with vue-cli-service
  serve                                      alias of "npm run serve" in the current project
  build                                      alias of "npm run build" in the current project
  ui [options]                               start and open the vue-cli ui
  init [options] <template> <app-name>       generate a project from a remote template (legacy API, requires @vue/cli-init)
  config [options] [value]                   inspect and modify the config
  outdated [options]                         (experimental) check for outdated vue cli service / plugins
  upgrade [options] [plugin-name]            (experimental) upgrade vue cli service / plugins
  migrate [options] [plugin-name]            (experimental) run migrator for an already-installed cli plugin
  info                                       print debugging information about your environment
  help [command]                             display help for command

  Run vue <command> --help for detailed usage of given command.

Installing in an Already Created Project

vue add typescript

Let’s create a brand new project

https://vitejs.dev/guide/#scaffolding-your-first-vite-project
yarn create vite

yarn create vx.y.z
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "create-vite@x.y.z" with binaries:
      - create-vite
      - cva

✔ Project name: … vueme
✔ Select a framework: › vue
✔ Select a variant: › vue-ts

Scaffolding project in /Users/josoroma/vue/vueme...

✨  Done in 35.12s.

Sweet! now run:

cd vueme && yarn && yarn dev

Vite gives you a minimal App folder structure

Use the principle of predictability, so the if your App scales, it will remain maintainable and extendable the more it grows. The goal is to reach the ability to intuitively address any feature request or bug report to its location in the codebase.

src/components/HelloWorld.vue

<script setup lang="ts">
import { ref } from 'vue'

defineProps<{ msg: string }>()

const count = ref(0)
</script>

<template>
  <h1>{{ msg }}</h1>

  <p>
    Recommended IDE setup:
    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
    +
    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
  </p>

  <p>See <code>README.md</code> for more information.</p>

  <p>
    <a href="https://vitejs.dev/guide/features.html" target="_blank">
      Vite Docs
    </a>
    |
    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
  </p>

  <button type="button" @click="count++">count is: {{ count }}</button>
  <p>
    Edit
    <code>components/HelloWorld.vue</code> to test hot module replacement.
  </p>
</template>

<style scoped>
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>