My First Impressions of Vue.js

Getting Started With Vue

One of my favorite things about working with React is Create React App. It’s a nearly painless way of spinning up a React environment and getting to work right away. Therefore I was looking for something similar in Vue. After a little digging I found the Vue CLI, a quick way to get an environment set up. I found a nice tutorial on navigating the Vue CLI. Like Create React App, it has been a nearly painless way to get up and running. I was quickly up and running.

Vue Project Structure

Vue’s project structure is similar to React. I won’t cover it all but I’ll touch on some of the important things. There is a public folder that contains index.html , which contains a div#app section. This is where your files will be auto injected. Next is the main.js in the project’s root. Similar to React, it imports the App component and mounts/renders it to the div#app . I am someone who still likes to do a CSS reset so I can start with a clean slate so I also imported my CSS reset file into main.js . Any other global CSS styles can be imported here as well.

Vue Components File

A component has 3 main parts: the template, script, and style. The template section is where your HTML structure is located. It is similar to returning JSX in React (you can also use JSX in Vue if you prefer). The script is where your Javascript is located. It is where you can export your component, import child components, and where your state and methods are located. Finally the style section is where you can style the component. Here is a basic component.

// Component's structure
<template>
<div class="my-component">
<h1>My Component</h1>
<p>{{myText}}</p>
<ChildComponent></ChildComponent>
</div>
</template>
</div>
</template>

// Component's JS
<script>
import ChildComponent from './ChildComponent'
export default {
name: 'MyComponent',
components: {
'ChildComponent'
},
data() {
return {
myText: "Lorem ipsum"
}
}
</script>
// Component's styling
<style lang="scss" scoped>
@import '../assets/scss/variables.scss';
h1 {
color: $color-primary;
}
</style>

Template Section

Here is where you build out your component’s HTML structure. Like React it can only have one top level element (in this case div.my-component ). This is a very basic implementation. I recommend looking through the Vue documentation to see everything you can do with it such as using directives to build reusable components. This probably all makes sense to you, the only parts that may be a bit foreign is the double curly braces in the paragraph element and the non-HTML standard element ChildComponent. In this case the p element would output “Lorem ipsum” when the element is rendered as it is accessing the value from the key/value pair in the data function in the script section. Additionally, similar to React, the ChildComponent renders another component. So, for our example, if the ChildComponent was an image, it would render an <img /> element here.

Script Section

The next part is the script section. Here you can export your component so it can be used in other files, import child components, use methods and state, among other things such as watchers. In our particular example we are importing our child component and then declaring it will be used in our parent component. We are also using a function data that returns data that can be used in the template. In our case “Lorem ipsum” is used in our p element.

Styling Section

The final part is the styling section. This is pretty self explanatory. I do want to point out a few things though. The first is my use of SCSS. To use a preprocessor you will have to install it. See this for more information. To actually use a preprocessor you will have to specify the language ( lang="scss" ). Next is the scoped keyword. The scoped keyword allows you to only target the specific component. Using my example, if I didn’t include the scoped keyword all h1 elements would be targeted. But because I did include the scoped keyword only the h1 in this element will be targeted.

Final Thoughts

So far I really like Vue. It’s been a pretty painless transition from React to this point. Some things I like even more than React such as how styling is handled in Vue (as compared to Styled Components or something similar in React). I also really like the use of directives. So far I’ve really only dealt with static data. I’m excited to see how dynamic data is handled going forward.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store