Vue3 Form with Slots

DEMO

---

Slots

Add ability to use data from a parent App component.

No need to pass it down like a prop (alternative).

Dynamic components

Components that can be swapped with another components.

Animations

<transition name="fade">
    <p v-if="show">fade in</p>
</transition>

The v-enter transition class has been renamed to v-enter-from and the v-leave transition class has been renamed to v-leave-from. link

.v-enter-from,
.v-leave-to {
    opacity: 0;
}

.v-leave-from,
.v-enter-to {
    opacity: 1;
}

Animation Hooks:

• before-enter
• enter
• after-enter
• before-leave
• leave
• after-leave

Web Animations API

• Using the Web Animations API

Animate.css

• public/index.html
• <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" referrerpolicy="no-referrer" />
• https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css

---

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Localhost

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.