Vue 3 is in beta and it’s subject to change.*
Vue 3 is the up and coming version of Vue front end framework.
It builds on the popularity and ease of use of Vue 2.
In this article, we’ll look at how to create components with Vue 3.
Components and Props
Props are attributes that we can add to components to pass data to them.
To create a component that takes a prop, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<hello name="mary" />
</div>
<script>
const root = {};
const app = Vue.createApp(root);
app.component("hello", {
props: ["name"],
template: `<p>hello {{name}}</p>`
});
app.mount("#app");
</script>
</body>
</html>
We have the name prop that takes a string and we display it.
We can use v-for to render multiple items and render a component for each.
For instance, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="[https://unpkg.com/vue@next](https://unpkg.com/vue@next)"></script>
</head>
<body>
<div id="app">
<hello v-for="p in people" v-bind:person="p" v-bind:key="p.id" />
</div>
<script>
const root = {
data() {
return {
people: [
{ id: 0, name: "mary" },
{ id: 1, name: "jane" },
{ id: 2, name: "bob" }
]
};
}
};
const app = Vue.createApp(root);
app.component("hello", {
props: ["person"],
template: `<p>hello {{person.name}}</p>`
});
app.mount("#app");
</script>
</body>
</html>
Since we aren’t passing a string prop, we need the v-bind directive to let us pass non-string values to our component.
The key prop is needed so that Vue 3 can track the items properly.
In the app.component call, we have the props property with a prop name that’s accepted by our component.
And we can get the name property from the object.
Vue 3 components resemble web component spec’s custom elements.
It also implements the slot API so that we can use slots to add different content to our components.
The Vue Instance
The Vue instance is the root of our app.
We create it with the createApp method.
For instance, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
{{a}}
</div>
<script>
const data = { a: 1 };
const vm = Vue.createApp({
data() {
return data;
}
}).mount("#app");
</script>
</body>
</html>
We have our data object we which we return in the data method.
Then we can use the a property in our template.
The Vue.createApp method returns the Vue instance.
It should contain the properties of the data object as properties.
If we have:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
{{a}}
</div>
<script>
const data = { a: 1 };
const vm = Vue.createApp({
data() {
return data;
}
}).mount("#app");
console.log(vm.a === data.a);
</script>
</body>
</html>
The console log should log true .
And if we change the value of vm.a :
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
{{a}}
</div>
<script>
const data = { a: 1 };
const vm = Vue.createApp({
data() {
return data;
}
}).mount("#app");
vm.a = 2;
console.log(data.a);
</script>
</body>
</html>
Then the value of a in the template and the data object should both change to 2.
Conclusion
Components can take props so we can populate it with data dynamically from the outside.
The Vue instance is the root of a Vue app.
It contains the data which can be changed and the change will be reflected everywhere.
