Intro
When Ali posted her complete beginners guide to Vue, I decided that was a good time to give it a try since it kept coming up and I was having a particularly frustrating day with React. Ever since I've been investing my time in Vue and absolutely loving it! In this post, I want to walk through (number) and topics I found helpful to learn about after Ali's guide (other than the other great articles listed at the end of that post).
1. Single File Components
One of the things I love so much about Vue is the structure of single file components - files with the .vue file extension. The clear distinction between HTML, CSS, and JavaScript clicked really well for me.
<template>
<div>
This is where the HTML goes.
</div>
</template>
<script>
// This is where the JS goes.
module.exports = {
name: 'ComponentName'
}
</script>
<style scoped>
/* This is where the CSS goes.*/
</style>
2. Scoped Styles
You may have noticed that I didn't use a <style> tag, but rather a <style scoped> tag. The difference is that scoped styles only affect the component where they are applied and any children components! This helps keep the CSS in a single place without needing a lot of #id targeting or inline styles.
3. Vue Router
Vue Router was one of the more frustrating things when I was starting, but mostly because I was underestimating how powerful it was.
Router allows you to create a Single Page App without needing much work outside of your normal Vue workflow. You create a Layout component that includes a <router-view> component and a router.js file where you specify what views you would like to make available.
Where I failed to fully grasp the power of Router was when I thought I needed to create 2 layout pages and navigate between them so that I could nest the router element further in the page under some circumstances. However, the creators of Vue Router were way ahead of me and you can nest a <router-view> inside another <router-view>!
4. Vuex
As you start building bigger and cooler apps, you'll find it becomes harder and harder to keep track of the state of all of your components. Vuex allows you to create a "state bank" where you can keep all your important details that many components need to access.
Just make sure when you are declaring your store you include new Vuex.Store( in this line:
const store = new Vuex.Store({
Not that I would know from experience
Quick Tips
Some quick mentions that I'm not sure where else to put:
Learn from my struggle
As I usually do when I first become interested in something, I throw my whole being into that thing. So while getting ready in the morning, I started playing some Vue conference talks. One of them was this one by Evan You (the creator of Vue):
I was super excited that a new version of Vue was coming out, and all the benefits sounded amazing!
So when I headed into work that day, the first thing I did was run the below command, which returned 3.#.# - I already have version 3! Sweet!
$vue --version
But alas, this is the CLI version that is being returned, not the version of Vue in use (which can be found with the Vue dev tools).
Official Docs
There are separate doc sites for
Most of them have light touches on each other, but it's good to keep in mind that you might be on the doc-lite version of what you're looking for.
Tutorial 'Skipping'
In many Vue guides, I've noticed that they start with something like this:
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
Which is great... except that I was working with a .vue file and this is for a .js file.
Often, if you skip to the next code block, it will either be in the single file component format or start reviewing how to transfer to single file component format.
Closing
Hopefully some of the things I've learned the hard way can act as pointers to help get you kick-started in Vue! I'm still learning plenty every day about Vue and the best ways to do things, but if you have questions I'd love to help or help point you to someone more knowledgeable!
Space Photo by Casey Horner on Unsplash
Top comments (5)
This is great Tyler. I used all of these in my first large vue application!
Hope you also appreciated the Vue-CLI goof.
I've been holding back on that one in your "what mistakes have you made" threads 😜
We have definitely all been there haha.
Tyler, in the first snippet, did you mean to say this is where the html goes in the div tag?
Haha, yeah! Fixing now :P
Good catch!