Vue.js 3.0 Tutorial

Vue.js 3.0 Component Advanced

Vue.js 3.0 Transitions & Animations

Vue.js 3.0 Reusable & Combinable

Vue.js 3.0 Advanced

Vue.js 3.0 Tools

Vue.js 3.0 Scale

Vue.js 3.0 Accessibility

Vue.js 3.0 Migrating from Vue2

Vue.js 3.0 Contribute Documentation

Vue.js 3.0 API References

Vue.js 3.0 Style Guide

Vue 3.0 Style Guide

Vue 3.0 built-in components

Vue 3.0 comes with built-in components that can be used to simplify your work. In this tutorial, we will cover two of these built-in components: Teleport and Suspense.

Teleport

Vue 3.0 introduces a new component called Teleport that helps you render a part of your component in a different part of the DOM tree, outside the current component.

This can be particularly useful when you're dealing with things like modals, notifications, or any component that you want to break free from its container to escape from the CSS rules (like overflow or z-index) of parent components.

Here's how you can use Teleport:

<template>
  <div>
    <h1>Home Page</h1>
    <!-- Teleport the modal outside root -->
    <teleport to="body">
      <div class="modal" v-if="isModalOpen">
        <h2>Modal Title</h2>
        <p>Modal Content</p>
        <button @click="isModalOpen = false">Close</button>
      </div>
    </teleport>
    <button @click="isModalOpen = true">Open Modal</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isModalOpen: false,
    };
  },
};
</script>

In this example, the modal will be rendered outside the root component directly inside the body element whenever isModalOpen is true.

Suspense

Vue 3.0 introduces the Suspense component which allows you to "suspend" your component rendering and display some fallback content until a condition is met. It's particularly useful when dealing with async components or data fetching.

Here's an example of how you can use Suspense with an async component:

import { defineAsyncComponent } from 'vue'

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

export default {
  components: {
    AsyncComponent
  }
}

Then use it with Suspense in your template:

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

In this example, the Loading... message will be displayed until AsyncComponent finishes loading.

These built-in components introduced in Vue 3.0 help make managing complex UIs easier and more intuitive. Explore them and see how they can simplify your Vue application development.

Vue 3.0 Built-in Component Props and Options:
- Props: Built-in components often accept props for customization.
- Options: Some components have configuration options for specific behaviors.
```
<router-link to="/home" class="nav-link" active-class="active">Home</router-link>
```
Vue 3.0 Built-in Directives:
- v-model: Two-way binding for form inputs.
- v-if, v-else-if, v-else: Conditional rendering.
- v-for: Looping through arrays.
```
<input v-model="message">
<div v-if="isVisible">Visible</div>
<ul>
  <li v-for="item in items">{{ item.text }}</li>
</ul>
```
Vue 3.0 Built-in Transitions and Animations:
- <transition> Component: Wraps elements for transition effects.
- <transition-group> Component: Handles list transitions.
- CSS Classes: Vue adds classes like v-enter, v-enter-active, etc.
```
<transition name="fade">
  <p v-if="show">I will fade</p>
</transition>
```

Vue 3.0 Built-in Form Components:

<input>: Standard HTML input element.
<textarea>: Text area for multiline input.
<select>: Dropdown for selecting options.

<input v-model="username">
<textarea v-model="description"></textarea>
<select v-model="selectedOption">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

Vue 3.0 Built-in Layout Components:
- <transition> and <transition-group>: For handling animations.
- <keep-alive>: Caches and keeps alive components during dynamic changes.
```
<transition name="fade">
  <p v-if="show">I will fade</p>
</transition>
<keep-alive>
  <component :is="currentComponent"></component>
</keep-alive>
```
Vue 3.0 Built-in Navigation Components:
- <router-link>: For navigation in Vue Router.
- <router-view>: Renders matched components based on the current route.
```
<router-link to="/home" class="nav-link" active-class="active">Home</router-link>
<router-view></router-view>
```

Vue 3.0 Built-in UI Components:

<transition> and <transition-group>: For UI animations.
<keep-alive>: Useful for caching components in UI.

<transition name="fade">
  <p v-if="show">I will fade</p>
</transition>
<keep-alive>
  <component :is="currentComponent"></component>
</keep-alive>

Extending Built-in Components in Vue 3.0:
- Mixin Composition: Use mixins to extend component functionality.
- Inheritance: Extend components using extends option.
```
const MyMixin = {
  // ... mixin options
};

const MyComponent = {
  mixins: [MyMixin],
  // ... component options
};
```

Vue 3.0 Built-in Component Customization:

Props and Options: Many components accept props and options for customization.
Scoped Slots: Customize content and behavior using scoped slots.

<router-link :to="link" :class="linkClass" custom-prop="value">
  <template #default="{ navigate, href }">
    <a :href="href" @click="navigate">Custom Link</a>
  </template>
</router-link>

Vue 3.0 Built-in Component Examples:

Tabs Component:

<tabs>
  <tab title="Tab 1">Tab 1 Content</tab>
  <tab title="Tab 2">Tab 2 Content</tab>
</tabs>

Accordion Component:

<accordion>
  <accordion-item title="Item 1">Item 1 Content</accordion-item>
  <accordion-item title="Item 2">Item 2 Content</accordion-item>
</accordion>

Modal Component:

<modal v-if="showModal" @close="showModal = false">
  <p>Modal Content</p>
</modal>