Vue Web Component

Posted on  by admin

Publishing

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?

Whether for a job or just for side projects, having a suite of components you can reach for is an excellent way to get going faster in a new or existing project. But what if not all of your projects are using the same UI framework? Or, what if you have one that isn't using any JavaScript framework at all, and is completely server-rendered?

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

But sometimes we find ourselves in the above situation, working with another JavaScript framework such as React or Angular, or using a backend rendering system like Rails or Laravel.

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.

🔗Web Components

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 a running live version, see https://mdn.github.io/todo-vue/dist/. Familiarity with the core HTML, CSS, and JavaScript languages, knowledge of the terminal/command line.

Vue components are written as a combination of JavaScript objects that manage the app's data and an HTML-based template syntax that maps to the underlying DOM structure.

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.

Inside the