$devvkit learn --librarie vue.js-guide

Vue.js Guide

[vue][frontend][reactive][spa]

JavaScript / TypeScript

Install

npm create vue@latest
# or: npm create vite@latest my-app -- --template vue-ts

Vue is a progressive framework designed for incremental adoption. Its core library focuses on the view layer only, making it easy to integrate with other libraries or existing projects.

The Composition API (setup script) replaces the older Options API with better TypeScript support and logic reuse via composable functions. Vue's reactivity system uses Proxy-based deep watchers.

Vue's ecosystem includes Pinia (state), Vue Router (routing), and Vite (build). Single-File Components (SFCs) co-locate template, script, and style in a single .vue file.

Setup

Create app· Scaffold a Vue application.

npm create vue@latest my-app -- --typescript
cd my-app
npm run dev

Components

SFC component· Single-File Component.

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

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

<style scoped>
button { color: var(--primary); }
</style>

Reactivity

Reactive state· Proxy-based reactivity.

import { reactive, ref, computed } from 'vue'

const count = ref(0)
const state = reactive({ name: 'Alice', items: [] })
const doubled = computed(() => count.value * 2)

Directives

Conditional rendering· v-if / v-show.

<div v-if="loading">Loading...</div>
<div v-else-if="error">Error</div>
<div v-else>{{ data }}</div>

<div v-show="visible">Always rendered</div>

List rendering· v-for with key.

<li v-for="item in items" :key="item.id">{{ item.name }}</li>

Two-way binding· v-model.

<input v-model="username" />
<p>{{ username }}</p>

Composition API

Composable· Reusable logic function.

export function useCounter() {
  const count = ref(0)
  function increment() { count.value++ }
  return { count, increment }
}

// In component:
const { count, increment } = useCounter()

Provide / inject· Dependency injection.

// Ancestor:
import { provide, ref } from 'vue'
provide('theme', ref('dark'))

// Descendant:
import { inject } from 'vue'
const theme = inject('theme')

State Management

Router setup· Vue Router integration.

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/users/:id', component: User },
  ],
})
app.use(router)

Pinia store· State management.

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', () => {
  const name = ref('Alice')
  const setName = (n: string) => { name.value = n }
  return { name, setName }
})