Introduction to Vue JS

What is Vue?

Vue is an open-source Javascript frontend framework used to create user interfaces. It was initially created by a software developer, Evan You, and released in 2014. Vue is one of the most popular frontend Javascript frameworks on the market. It's most important feature is the ability to create and reuse components for displaying beautiful UIs on software applications. If you are familiar with HTML, CSS, and Javascript, Vue shouldn't be that big of a task to learn. More specifically, if you've experienced a framework like Angular JS, it'll be even more of a breeze to learn. Even if you haven't dealt with, you have nothing to worry about, you will learn the basics of Vue in this article. I will show you how to do the initial rendering of your Vue application and how to create components inside of it.

Rendering in Vue

Before we can start developing extravagant components for our UI, we must first learn how to render a Vue component altogether.

Although there are many ways to go about rendering a Vue js app, we're going to go over how to do it using a cdn. First, we would like to travel to an HTML file in our project. Once we make it there, place this information, inside of the body tag.

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

The CDN URL is being used to import the built-in Vue createApp function into the file. Since we've gained access into the createApp's functionality, we must create a function, in this case, the "setup" method that allows us to create and return a message. In this example, once the message is returned, we can chain on the mount function and pass in the id of whichever html tag we're appending the message to. In this instance, it is the div with id of app seen just above.

Vue Components

When you get to the point of building bigger projects past initial rendering, you'd most likely need to create components inside of Javascript files. In order to do this, you must use the component method that comes with the importation of Vue. It used like this:

Vue.component("devto-tutorial", {
  template:
    '<h1>Dev.to App Setup</h1>'
});

// This is where we create the instance of our root Vue app
new Vue({ el: "#devto-tutorial" });

In this example, we use the component method that takes in the name of your component you're creating and an object containing the template of what should be in it. After that, we call a new Vue instance with the name of the element passed into it in order to render our component.

Conclusion

In conclusion, if you are interested in building Javascript web applications, you should give Vue.js a go. It is one of the leaders in the software development industry and the community continues to grow by the day. Hopefully this article gave you some insight about Vue.js and leads you to using it in one of your upcoming projects. Good luck and thanks for giving this article a read.