Web components #1: Development of simple components in Vue.JS

How to create a simple web component using the very popular JavaScript Framework Vue.js

For our needs Visual Studio Codewith installed extension Ve and of course necessary Vue CLI, which allows us to develop any reusable web components.

Preparation of development environment

In VSC we create a new terminal and install Vue CLI:

npm install -g @vue/cli

We create a folder with the project.

md my-components
cd my-components

We are introducing the project.

npm init -y

Install Vue to the project folder.

npm i vue

In addition (optional) we activate automatic CSS compilation using LESS loader.

npm install -D less-loader less

English package. jsonThe project looks like.

{
  "name": "my-components",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "less": "^3.10.3",
    "less-loader": "^5.0.0"
  }
}

Development of simple web components

We create a simple web component. We create a new file in our projectmy-component. vue with the following content:

<template>
    <div>Hello {{name}}</div>
</template>

<style>
    div {
        border: 1px solid @color;
        padding:4rem;
    }
</style>

<script>
export default {
    props: {
        name: { type: String, default: "Martin" }
    }
}
</script>

And now we can try if the development environment works correctly.

vue serve my-component.vue

The result in the terminal will display the address on which we will find the deleted component in the browser.

DONE  Compiled successfully in 141ms

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.31.231:8080/

Export the resulting components

The result of our development is exported to components that can be used further.

vue build --target wc my-component.vue

As a result of the build, we will find in my-components/dist/components/in the form of compressed and uncompressed version of the component, including demo file. html that demonstrates use.

<meta charset="utf-8">
<title>my-component demo</title>
<script src="https://unpkg.com/vue"></script>
<script src="./my-component.js"></script>

<my-component></my-component>

Vue.component method ()

The component can also be created very simply by defining everything through one single file, which will then be inserted into HTML document.

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <title>Vue.js komponenta</title>
</head>
<body>
    <div id="app">
        <my-rounded-image src="https://picsum.photos/300/300">
        </my-rounded-image>

        <my-rounded-image src="https://picsum.photos/200/200">
        </my-rounded-image>
    </div>
    <script type="text/javascript" src="app.js"></script>
</body>
</html>

In file app.js We define the application and components, for example:

Vue.component("my-rounded-image", {
    template: '<div style="display:inline-block;border-radius:50%;overflow:hidden"><img v-bind:src="src"></div>',
    props: ["src"]
});

var app = new Vue({
    el: '#app'
})

This technique is especially suitable for

minor user interaction with apps
small sub shared components showing specific simple values

Disadvantages

We are able to highlight syntax in editor - HTML is closed in template
In the method Vue.component () not possible to define the separation of CSS styles for components
We are declaring strictly on JavaScript (can not use pre-processing other language)

For more complex development, it is always better to use Single Component File . Then create a file my-component. vue and define templates, styles and behavior components in this file.

In the next part, we will show the development of complex components.