Vue 3 cheatsheet

Vue 3: Setup

4 common Vue 3 tasks.

Create an app

Scaffold a Vue project with Vite. Choose TypeScript, Router and Pinia when prompted.

npm create vue@latest

Install and start

Install dependencies and start the dev server.

cd my-app && npm install && npm run dev

Build for production

Create an optimized build in the dist folder.

npm run build

Component skeleton

A single-file component with script setup, a template and scoped styles.

<script setup lang="ts">
import { ref } from "vue";
const count = ref(0);
</script>

<template>
  <button @click="count++">Clicked {{ count }} times</button>
</template>

<style scoped>
button { font-weight: bold; }
</style>