[001.1] Introduction to Vue.js

Build a Todo app using Vue.js

Subscribe now

Introduction to Vue.js [08.14.2017]

Vue.js is a modular framework that allows to build scaleable and performant web applications with ease. Vue is unopionated about how your application should be built and carries numerous similarities to React. Both utilize a virtual DOM, provide reactive and composable view components, and maintain focus on the core library while allowing other tasks such as state management and routing to be handled by companion libaries. They even carry similar performance benchmarks in 3rd party testing.

To demonstrate this, we're going to build a simple Todo application with a Material Design UI and username/password authentication. We'll call it Taskify. We will also include a pre-written RESTful backend written in Koa so our app has something to interact with. So let's get started.

Configuration

First, we need to go over a few requirements. You will need...

Now, it's time to download and install the Taskify api. So open your terminal of choice then follow along.

  1. cd into your directory of choice then mkdir Taskify
  2. git clone https://github.com/projekt-matara/vue-koa-tut.git
  3. cd vue-koa-tut
  4. yarn install
  5. Open config.js`
  6. Locate this line: mongoUrl: 'your-mongo-here'
  7. Change your-mongo-here to the url that points to your Mongo/Mlab instance.
  8. Save the file and close the text editor.
  9. Then back in our terminal, enter npm start
  10. We win :-).

Great, now we have something for our Taskify app to interact with. Time to scaffold out our Vue app.

  1. cd ..
  2. vue init webpack Taskify
  3. In the question list, say yes to everything except ESLint.
  4. cd taskify
  5. yarn init
  6. Answer the questions with the default response all the way down.
  7. yarn add vue vuex vue-material vue-resource pug stylus stylus-loader

With that last step, we have added all of the modules that we will need for this build. Vue is the core library for building the UI. Vuex handles state management. Vue-material provides Material Design UI Components built specifically to be used with Vue. Pug is an HTML preprocessor intended to make things look pretty. Stylus is a CSS preprocessor and stylus-loader helps it load within Webpack. The preprocessors aren't required but they are absolutely helpful.

File Structure

Now, let's open the project in our text editor of choice:

$ sublime .

We should see a directory structure that looks like this...

build/
config/
node_modules/
src/
  assets/
  components/
  router/
  App.vue
  main.js
static/
test/
.babelrc
.editorconfig
.gitignore
.postcssrc.js
index.html
package.json
README.md
yarn.lock

That's a lot of stuff and it can understandably feel dizzying at first. Let's go through the directories to figure out what each does.

build/

This is where the build the build configuration lives. We won't messing with this in the tutorial.

config/

Config is all about webpack configuration. Again, we won't be touching this for this tutorial.

node_modules/

Those who are experienced with Node.js should know what this is. Any Node dependencies will go here.

src/

This is where all of our code will be going. HTML, CSS, Javascript, it all ends up here.

static/

This is where any static assets will go that you do not want to be processed by Webpack.

test/

this is where your end to end and unit tests would go. Normally I would advocate writing tests but for brevity's sake, we'll ignore this for now.

Now we're going to turn our attention to the src/ directory considering this is where we will be spending all of our time.

assets/

Any static assets that you wish to be processed by webpack will go here.

components/

One of the most important directories. Your Vue.js components will go here. In Vue, components are the core building blocks of UI code. They are self contained and reusable miniature Vue instances. If you will open Hello.vue, you will see an example of what a component looks like. You have the <template> tag which is where your HTML goes. Then you have your <script> tag which is where your Javascript goes. Lastly you have the <style> tag which, you guessed it, is where your CSS code goes.

router/

This is a designated location for defining and handling routes based on vue-router.

App.vue

This is the central template of our app. We won't do too much to this, however, we will make a few changes to the following...

<template lang="pug">
  #app
    router-view
</template>

<script>
export default {
  name: 'app'
}
</script>

<style lang="stylus">
html
  background-color #FAFAFA
</style>

Here, you will see that we have altered our template to use Pug and our style tag to use Stylus. Beyond that, we tamed the background color of our HTML. Other than that, no real changes.

main.js

Finally, here is the central location of our Javascript Vue setup. Much of our Vue configuration will be handled from here.

Conclusion

Today, we've managed to install and run our Taskify API then we scaffolded out our Vue.js app and learned how it is structured. Tomorrow, we will turn our attention to main.js along with vuex and vue-router.