Introduction to Vue 3

Introduction to Vue 3

Vue.js is a progressive JavaScript framework used for building user interfaces and single-page applications. Vue 3 is the latest major version, offering several improvements over its predecessor. This article will dive deep into Vue 3, covering its core concepts and providing practical examples to help you get started.

Core Features of Vue 3

1. Composition API: Provides a more flexible and intuitive way to manage component logic.

2. Teleport: Allows you to render a component's template outside its parent component.

3. Fragments: Enables components to return multiple root elements.

4. Suspense: Manages asynchronous dependencies in a declarative way.

5. Improved TypeScript Support: Enhances TypeScript integration for better developer experience.

Setting Up a Vue 3 Project

First, ensure you have Node.js installed. Then, install Vue CLI if you haven't already:

npm install -g @vue/cli

Create a new Vue 3 project:

vue create my-vue3-app

Navigate to your project directory:

cd my-vue3-app

Serve the application:

npm run serve

Your new Vue 3 app should now be running on http://localhost:8080.

Composition API

The Composition API is one of the most significant changes in Vue 3, offering a new way to organize and reuse component logic. Here’s an example of a component using the Composition API:

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="increment">Increment</button>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const message = ref('Hello Vue 3')
    const count = ref(0)

    const increment = () => {
      count.value++
    }

    return {
      message,
      count,
      increment
    }
  }
}
</script>

Teleport

Teleport allows you to move a part of your component’s template to another location in the DOM. This is useful for modals, dropdowns, or tooltips. Here's an example:

<template>
  <div>
    <button @click="showModal = true">Show Modal</button>
    <teleport to="body">
      <div v-if="showModal" class="modal">
        <p>This is a modal</p>
        <button @click="showModal = false">Close</button>
      </div>
    </teleport>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const showModal = ref(false)

    return {
      showModal
    }
  }
}
</script>

<style>
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 1rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>

Fragments

Vue 3 supports fragments, allowing components to return multiple root elements without needing a wrapper element. This simplifies the template structure:

<template>
  <>
    <h1>Fragment Example</h1>
    <p>This is a fragment.</p>
  </>
</template>

<script>
export default {
  setup() {
    return {}
  }
}
</script>

Suspense

Suspense is a new feature that lets you coordinate the loading of asynchronous dependencies. It’s particularly useful for handling async components gracefully. Here’s a basic example:

<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <p>Loading...</p>
    </template>
  </Suspense>
</template>

<script>
import { defineAsyncComponent } from 'vue'

const AsyncComponent = defineAsyncComponent(() =>
  import('./AsyncComponent.vue')
)

export default {
  components: {
    AsyncComponent
  }
}
</script>

Improved TypeScript Support

Vue 3 enhances TypeScript support, making it easier to build type-safe applications. Here’s a simple example of a component written in TypeScript:

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

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const message = ref<string>('Hello TypeScript with Vue 3')

    return {
      message
    }
  }
})
</script>

Conclusion

Vue 3 introduces many powerful features that enhance the development experience and enable you to build more maintainable and scalable applications. The Composition API, Teleport, Fragments, Suspense, and improved TypeScript support are just a few of the exciting new additions. By leveraging these features, you can create robust applications with clean and reusable code.

As you continue to explore Vue 3, you'll discover even more tools and techniques to help you build modern web applications efficiently. Happy coding!