Sure! Here's a basic introduction and tutorial for Vue 3 Composition API to get you started.

Vue 3 Composition API Tutorial

The Composition API is a new way to write Vue components introduced in Vue 3, designed to improve the organization and reuse of code, especially in complex components.

1. Setup Vue 3 Project

If you don't have a Vue 3 project yet, you can create one using Vue CLI or Vite.

Using Vue CLI:

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

Or using Vite (recommended for Vue 3):

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

2. Basic Vue 3 Composition API Component Example

Create a new component HelloWorld.vue:

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>
<script setup>
import { ref } from 'vue'
// reactive variable
const count = ref(0)
// method to update state
function increment() {
  count.value++
}
</script>

Explanation:

• ref: Used to declare reactive state variables.


• count.value: Access or mutate the actual value inside the ref.


• 
  
  
  
  
  
  

  
  

  Vue 3 Composition API Tutorial

  
  

  Learn the modern way to build Vue applications

  
  

  
  

  Introduction

  
  

  Reactivity

  
  

  Lifecycle

  
  

  Computed & Watch

  
  

  Advanced

  
  

  
  
  

  
  

  
  

  What is the Composition API?

  
  

  The Composition API is a set of additive, function-based APIs that allow flexible composition of component logic. It was introduced in Vue 3 as an alternative to the Options API.

  
  
  

  Why Use Composition API?

  
  

  
  
  • Better logic reuse and composition
  
  
  • More flexible code organization
  
  
  • Better TypeScript integration
  
  
  • Smaller production bundle
  
  

  
  
  

  Basic Setup

  
  

  
  // In Vue 3 with Composition API
  import { ref, onMounted } from 'vue'

  export default {
  setup() {
  // Reactive state
  const count = ref(0)
  
  // Methods
  const increment = () => {
  count.value++
  }
  
  // Lifecycle hooks
  onMounted(() => {
  console.log('Component mounted!')
  })
  
  // Return everything that should be available in the template
  return {
  count,
  increment
  }
  }
  }
  

  
  

  
  
  

  
  

  Composition API vs Options API

  
  
  

  Options API (Vue 2 style)

  
  

  
  export default {
  data() {
  return {
  count: 0
  }
  },
  methods: {
  increment() {
  this.count++
  }
  },
  mounted() {
  console.log('Component mounted!')
  }
  }
  

  
  
  

  Composition API (Vue 3)

  
  

  
  import { ref, onMounted } from 'vue'

  export default {
  setup() {
  const count = ref(0)
  
  const increment = () => {
  count.value++
  }
  
  onMounted(() => {
  console.log('Component mounted!')
  })
  
  return {
  count,
  increment
  }
  }
  }
  

  
  
  

  With the Composition API, related logic is grouped together rather than separated by options.

  
  

  
  

  
  

  
  

  
  

  Reactive State with ref() and reactive()

  
  
  

  ref()

  
  

  ref

  19:49
  MistralMistral AI

  ⊟

  vue 3 composition api tutorial

  Sure! The Vue 3 Composition API is a powerful way to organize and reuse logic in your Vue components. It provides a more flexible and modular approach compared to the Options API. Below is a step-by-step tutorial to get you started with the Vue 3 Composition API.

  Step 1: Setting Up Your Project

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

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

  Step 2: Basic Component with Composition API

  Let's create a simple component using the Composition API.
  

  • Create a Component File: Create a new file called MyComponent.vue in the src/components directory.
  
  
  • Define the Component: Use the setup function to define your component logic.
  
  

  
  

  <template>
    <div>
      <p>Count: {{ count }}</p>
      <button @click="increment">Increment</button>
    </div>
  </template>
  <script>
  import { ref } from 'vue';
  export default {
    name: 'MyComponent',
    setup() {
      const count = ref(0);
      const increment = () => {
        count.value++;
      };
      return {
        count,
        increment,
      };
    },
  };
  </script>
  <style scoped>
  /* Add your styles here */
  </style>

  Step 3: Using the Component

  Now, let's use this component in your main App.vue file.
  

  • Import and Register the Component:
  
  

  
  

  <template>
    <div id="app">
      <MyComponent />
    </div>
  </template>
  <script>
  import MyComponent from './components/MyComponent.vue';
  export default {
    name: 'App',
    components: {
      MyComponent,
    },
  };
  </script>
  <style>
  /* Add your styles here */
  </style>

  Step 4: Reactive State with reactive

  The ref function is great for simple reactive values, but for more complex objects, you can use the reactive function.
  

  • Update MyComponent.vue:
  
  

  
  

  <template>
    <div>
      <p>Name: {{ state.name }}</p>
      <p>Age: {{ state.age }}</p>
      <button @click="updateName">Update Name</button>
    </div>
  </template>
  <script>
  import { reactive } from 'vue';
  export default {
    name: 'MyComponent',
    setup() {
      const state = reactive({
        name: 'John Doe',
        age: 30,
      });
      const updateName = () => {
        state.name = 'Jane Doe';
      };
      return {
        state,
        updateName,
      };
    },
  };
  </script>
  <style scoped>
  /* Add your styles here */
  </style>

  Step 5: Computed Properties with computed

  You can create computed properties using the computed function.
  

  • Update MyComponent.vue:
  
  

  
  

  <template>
    <div>
      <p>Name: {{ state.name }}</p>
      <p>Age: {{ state.age }}</p>
      <p>Double Age: {{ doubleAge }}</p>
      <button @click="updateName">Update Name</button>
    </div>
  </template>
  <script>
  import { reactive, computed } from 'vue';
  export default {
    name: 'MyComponent',
    setup() {
      const state = reactive({
        name: 'John Doe',
        age: 30,
      });
      const doubleAge = computed(() => state.age * 2);
      const updateName = () => {
        state.name = 'Jane Doe';
      };
      return {
        state,
        doubleAge,
        updateName,
      };
    },
  };
  </script>
  <style scoped>
  /* Add your styles here */
  </style>

  Step 6: Watchers with watch

  You can watch reactive properties using the watch function.
  

  • Update MyComponent.vue:
  
  

  
  

  <template>
    <div>
      <p>Name: {{ state.name }}</p>
      <p>Age: {{ state.age }}</p>
      <p>Double Age: {{ doubleAge }}</p>
      <button @click="updateName">Update Name</button>
    </div>
  </template>
  <script>
  import { reactive, computed, watch } from 'vue';
  export default {
    name: 'MyComponent',
    setup() {
      const state = reactive({
        name: 'John Doe',
        age: 30,
      });
      const doubleAge = computed(() => state.age * 2);
      const updateName = () => {
        state.name = 'Jane Doe';
      };
      watch(() => state.name, (newName, oldName) => {
        console.log(`Name changed from ${oldName} to ${newName}`);
      });
      return {
        state,
        doubleAge,
        updateName,
      };
    },
  };
  </script>
  <style scoped>
  /* Add your styles here */
  </style>

  Step 7: Lifecycle Hooks

  You can use lifecycle hooks like onMounted, onUpdated, and onUnmounted with the Composition API.
  

  • Update MyComponent.vue:
  
  

  
  

  <template>
    <div>
      <p>Name: {{ state.name }}</p>
      <p>Age: {{ state.age }}</p>
      <p>Double Age: {{ doubleAge }}</p>
      <button @click="updateName">Update Name</button>
    </div>
  </template>
  <script>
  import { reactive, computed, watch, onMounted, onUnmounted } from 'vue';
  export default {
    name: 'MyComponent',
    setup() {
      const state = reactive({
        name: 'John Doe',
        age: 30,
      });
      const doubleAge = computed(() => state.age * 2);
      const updateName = () => {
        state.name = 'Jane Doe';
      };
      watch(() => state.name, (newName, oldName) => {
        console.log(`Name changed from ${oldName} to ${newName}`);
      });
      onMounted(() => {
        console.log('Component mounted');
      });
      onUnmounted(() => {
        console.log('Component unmounted');
      });
      return {
        state,
        doubleAge,
        updateName,
      };
    },
  };
  </script>
  <style scoped>
  /* Add your styles here */
  </style>

  Conclusion

  That's a basic introduction to the Vue 3 Composition API. You can now create more modular and reusable components using ref, reactive, computed, watch, and lifecycle hooks. Happy coding!

  19:49