Vuecheatsheet

<script src="https://unpkg.com/vue@3"></script>
<div id="app">{{ message }}</div>
<script>
  Vue.createApp({
    data() {
      return { message: 'Hello Vue!' };
    }
  }).mount('#app');
</script>

npm create vite@latest my-vue-app --template vue
cd my-vue-app
npm install
npm run dev

<input v-model="name" />
<p v-if="name">Hi, {{ name }}!</p>
<ul>
  <li v-for="item in list" :key="item.id">{{ item }}</li>
</ul>

app.component('Greeting', {
  props: ['name'],
  template: `<h1>Hello, {{ name }}!</h1>`
});

<Greeting name="Sumangal" />

props: {
  title: String,
  age: {
    type: Number,
    default: 18
  }
}

this.$emit('custom-event', payload);

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

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

export default createRouter({
  history: createWebHistory(),
  routes
});

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router).mount('#app');

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++;
    }
  }
});

const counter = useCounterStore();
counter.increment();

npm install vitest @vue/test-utils

import { mount } from '@vue/test-utils';
import MyComponent from '@/components/MyComponent.vue';

test('renders', () => {
  const wrapper = mount(MyComponent);
  expect(wrapper.text()).toContain('Hello');
});