Vue 3 — Component and Vue Instance
3 min readSep 28, 2020
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…
