The Ultimate Vue 3 Cheat Sheet: Everything You Need to Know

Vue.js is one of the most popular JavaScript frameworks for building user interfaces and single-page applications. With the release of Vue 3, there have been numerous updates and improvements that make it even more powerful and efficient. This cheat sheet is designed to provide you with a quick reference guide to the most important features and syntax in Vue 3. Whether you're a beginner or an experienced developer, this guide will help you get the most out of Vue 3.

Getting Started with Vue 3

First, make sure you have Node.js installed. You can create a new Vue 3 project using the Vue CLI:

npm install -g @vue/cli
vue create my-project
cd my-project
npm run serve

Project Structure

A typical Vue 3 project structure looks like this:

my-project/
├── node_modules/
├── public/
│ ├── index.html
├── src/
│ ├── assets/
│ ├── components/
│ │ └── HelloWorld.vue
│ ├── App.vue
│ ├── main.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md

Basic Syntax

Creating a Vue Component

<template>
  <div class="hello">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      message: 'Hello, Vue 3!'
    }
  }
}
</script>

<style scoped>
.hello {
  font-family: Arial, sans-serif;
}
</style>

Reactive Data

Vue 3 introduces the ref and reactive APIs for creating reactive data.

import { ref, reactive } from 'vue';

const count = ref(0);
const state = reactive({
  message: 'Hello, Vue 3!'
});

Computed Properties

import { computed } from 'vue';

const count = ref(0);
const doubleCount = computed(() => count.value * 2);

Watchers

import { ref, watch } from 'vue';

const count = ref(0);
watch(count, (newVal, oldVal) => {
  console.log(`Count changed from ${oldVal} to ${newVal}`);
});

Composition API

The Composition API is one of the biggest changes in Vue 3, providing a more flexible and modular way to write components.

<template>
  <div>{{ message }}</div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue 3 Composition API!');
    return { message };
  }
}
</script>

Directives

v-if, v-else-if, v-else

<template>
  <div>
    <p v-if="isVisible">Now you see me</p>
    <p v-else>Now you don't</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    }
  }
}
</script>

v-for

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' }
      ]
    }
  }
}
</script>

Events

Event Handling

<template>
  <button @click="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Button clicked');
    }
  }
}
</script>

Emitting Events

<template>
  <button @click="emitEvent">Click me</button>
</template>

<script>
export default {
  methods: {
    emitEvent() {
      this.$emit('custom-event', 'Event Payload');
    }
  }
}
</script>

Conclusion

Vue 3 offers a lot of new features and improvements that make developing with Vue more enjoyable and efficient. This cheat sheet provides a quick reference to the essential aspects of Vue 3, but there's much more to explore. The official Vue 3 documentation is an excellent resource for further reading and deep dives into specific topics. Happy coding!