Vue.js Cheatsheet

# Create a new Vue 3 project with Vite (recommended)
npm create vue@latest

# Navigate into the project
cd my-vue-app

# Install dependencies
npm install

# Start the development server
npm run dev

# Build for production
npm run build

<script setup>
import { ref, computed } from 'vue';

// Reactive state with ref() for primitive values
const count = ref(0);

// Computed property: a value that is derived from other reactive state
const doubleCount = computed(() => count.value * 2);

// Method to modify state
function increment() {
  count.value++;
}
</script>

<template>
  <!-- Text Interpolation -->
  <p>Count: {{ count }}</p>
  <p>Double Count: {{ doubleCount }}</p>

  <!-- Event Handling -->
  <button @click="increment">Increment</button>
</template>

<template>
  <!-- Attribute Binding -->
  <img :src="imageUrl" alt="Vue Logo">

  <!-- Conditional Rendering -->
  <p v-if="isVisible">Now you see me.</p>
  <p v-else>Now you don't.</p>

  <!-- List Rendering -->
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.text }}
    </li>
  </ul>

  <!-- Two-way data binding on form inputs -->
  <input v-model="message" placeholder="edit me">
  <p>Message is: {{ message }}</p>
</template>

<script setup>
import { ref } from 'vue';
const imageUrl = './logo.png';
const isVisible = ref(true);
const items = ref([
  { id: 1, text: 'Learn Vue' },
  { id: 2, text: 'Build something' }
]);
const message = ref('');
</script>

<!-- ParentComponent.vue -->
<template>
  <ChildComponent :message="parentMessage" @response="handleResponse" />
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
const parentMessage = ref('Hello from parent');
function handleResponse(payload) {
  console.log(payload); // "Message from child"
}
</script>

<!-- ChildComponent.vue -->
<script setup>
// Define props the component accepts
const props = defineProps({
  message: String
});

// Define events the component emits
const emit = defineEmits(['response']);

function sendMessage() {
  emit('response', 'Message from child');
}
</script>

<template>
  <p>{{ message }}</p>
  <button @click="sendMessage">Respond</button>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue';

// onMounted: Called after the component has been mounted to the DOM.
// Perfect for data fetching or DOM manipulations.
onMounted(() => {
  console.log('Component has been mounted!');
});

// onUnmounted: Called before the component is unmounted.
// Used for cleanup, like clearing intervals or event listeners.
onUnmounted(() => {
  console.log('Component is about to be unmounted.');
});
</script>

// 1. Install Vue Router: `npm install vue-router`

// 2. Create a router configuration (e.g., src/router/index.js)
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: About },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

// 3. In your main App.vue, use router-link and router-view
// <router-link to="/">Home</router-link>
// <router-link to="/about">About</router-link>
// <router-view />

// 1. Install Pinia: `npm install pinia`

// 2. Define a store (e.g., src/stores/counter.js)
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  // State: reactive data
  state: () => ({
    count: 0,
  }),
  // Getters: computed properties for the store
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  // Actions: methods to modify the state
  actions: {
    increment() {
      this.count++;
    },
  },
});

// 3. Use the store in a component
// <script setup>
// import { useCounterStore } from '@/stores/counter';
// const store = useCounterStore();
// store.increment();
// console.log(store.doubleCount);
// </script>