Learning Vue.js — Part 2

Using Sass with Vue, Single File Components and adding a code example

Welcome to part two of my journey on learning Vue.js. You might want to read part one first, if you haven’t yet. In part one I talked about my reasons of writing this journey down and how I configured my basic project setup.

In this part I want to add a Todo Component to my web application, which is taken from this CodeSandbox example, then touch on the topic of Single File Components in Vue.js and how I made writing Sass possible, so I could style my components comfortably.

Photo by Nail Gilfanov on Unsplash

Single File Components are a feature in Vue.js that I haven’t encountered while programming web applications with React.js. They contain everything one component needs – that’s generally an HTML template, a JavaScript section and a CSS section – in one file, as the name says. When you generate your project with Vue CLI, the example HelloWorld.vue component is exactly a Single File Component. That’s the reason, why it looks different from the examples in the introduction on vuejs.org.

Single File Components — Vue.js

At the moment I only have the HelloWorld component and the main App component. Besides reading documentation and tutorials, I think learning though reverse engineering is a very helpful part in learning about a new framework. In this case I took the example on a simple Todo App from CodeSandbox, as also linked below, and tried to integrate the components TodoList , BaseInputText and TodoListItem into my project. This basically turned out quite simple. The code from the components can be used as it is and in the App component the TodoList needs to be imported. I also removed the HelloWorld component from the App component, so the code looks like the following.

//App.vue
<template>
  <div id="app">
    <TodoList/>
  </div>
</template>
<script>
import TodoList from './components/TodoList.vue'
export default {
  name: 'app',
  components: {
    // HelloWorld,
    TodoList
  }
</script>

In the TodoList code example, in BaseInputText, you will also find a slightly modified styling tag looking like this.

<style lang="scss" scoped>

This might lead to an error message, that tells you something like

Failed to resolve loader: sass-loader
You may need to install it.

or

Module not found: Error: Can't resolve 'sass-loader'

I installed sass-loader with the two commands stated in the first two answers taken from the post from Github below.

$ npm install sass-loader --save-dev
$ npm install --save-dev node-sass

Module not found: Error: Cannot resolve module 'sass-loader' · Issue #121 · vuejs-templates/webpack

Installing sass-loader will enable you to write your style sheet in Sass syntax or alternatively in Scss, depending on your preference. If you haven’t used Sass yet, you might be interested in checking it out to make writing CSS style sheets more comfortable.

At the end of this a todo list, like the one in the CodeSandbox example, should show up on your web application.

Short remark: As stated in my first post, I started this project on Node version 9.x and updated to 10.x later. This made me run into a quickly resolvable error.

Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Missing binding /Users/.../test-project/node_modules/node-sass/vendor/darwin-x64-64/binding.node
Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 10.x
Found bindings for the following environments:
  - OS X 64-bit with Node.js 9.x
This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass` to download the binding for your current environment.

Simply running npm rebuild node-sass and restarting the project did the trick for me.