Vue's data object
Have you ever worked across multiple projects, and wanted a set of custom components you could just leverage across all of them?
As a Vue developer, ideally we would like to just use our framework of choice to build complex user interfaces.
Making components dynamic with props
How can we build a reusable UI across these various frontend options?
In Vue 3.2, we now have a solution to this problem: Web Components, powered by Vue!
According to MDN, "Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps."
Consider a few existing elements in HTML, such as select or video. These interactive elements contain their own basic styling (typically provided by the browser), some internal logic, and a way to listen to events.
Web Components allow developers to build their own elements, and reference them in their HTML - no framework required.
Here's a very basic web component example of a component that would display the current time. Once a custom Web Component has been defined, they can be rendered as part of the DOM, just like any standard HTML element.
We can use this element in our HTML like this:. Now it's time to dive deeper into Vue, and create our own custom component — we'll start by creating a component to represent each item in the todo list.
Along the way, we'll learn about a few important concepts such as calling components inside other components, passing data to them via props, and saving data state.
Note: If you need to check your code against our version, you can find a finished version of the sample Vue app code in our todo-vue repository.
For installation, and to use some of the more advanced features of Vue (like Single File Components or render functions), you'll need a terminal with Node and npm installed. Let's create our first component, which will display a single todo item.
We'll use this to build our list of todos. In your moz-todo-vue/src/components directory, create a new file named ToDoItem.vue.
Open the file in your code editor. Create the component's template section by adding to the top of the file.
Using Your Component In Vue
Create a section below your template section.