Book Image

Front-End Development Projects with Vue.js

By : Raymond Camden, Hugo Di Francesco, Clifford Gurney, Philip Kirkbride, Maya Shavin
Book Image

Front-End Development Projects with Vue.js

By: Raymond Camden, Hugo Di Francesco, Clifford Gurney, Philip Kirkbride, Maya Shavin

Overview of this book

Are you looking to use Vue 2 for web applications, but don't know where to begin? Front-End Development Projects with Vue.js will help build your development toolkit and get ready to tackle real-world web projects. You'll get to grips with the core concepts of this JavaScript framework with practical examples and activities. Through the use-cases in this book, you'll discover how to handle data in Vue components, define communication interfaces between components, and handle static and dynamic routing to control application flow. You'll get to grips with Vue CLI and Vue DevTools, and learn how to handle transition and animation effects to create an engaging user experience. In chapters on testing and deploying to the web, you'll gain the skills to start working like an experienced Vue developer and build professional apps that can be used by other people. You'll work on realistic projects that are presented as bitesize exercises and activities, allowing you to challenge yourself in an enjoyable and attainable way. These mini projects include a chat interface, a shopping cart and price calculator, a to-do app, and a profile card generator for storing contact details. By the end of this book, you'll have the confidence to handle any web development project and tackle real-world front-end development problems.
Table of Contents (16 chapters)
Preface

CSS Modules

A recent pattern that has become popular in the reactive framework world is CSS modules. Frontend development has always had to face the issue of conflicting CSS class names, ill-structured BEM code, and confusing CSS file structures. Vue components help to solve this by being modular and allowing you to compose CSS that, at compile time, will generate unique class names for the specific component that it was composed for. You can even have the exact same class names across components; however, they will be uniquely identified using a randomly generated string attached to the end.

To enable this feature in Vue, you will need to add the module attribute to the style block, and reference classes using JavaScript syntax:

<template>
    <div :class="$style.container">CSS modules</div>
</template>
<style lang="scss" module>
.container {
  Width: 100px;
    Margin: 0 auto;
    background: green;
}
</style>

In the preceding example, if you inspected the DOM tree that class will be called something like .container_ABC123. If you were to create multiple components that had a semantic class name like .container but used CSS modules, you would never run into style conflicts again.

Exercise 1.04: Style Vue Components Using CSS Modules

In this exercise, you will utilize CSS modules to style a .vue component. By using the $style syntax inside of a :class bind, you refer to the Vue instance's this.$style scope. Vue will generate random class names based on the components at run or build time ensuring the style will not overlap with any other classes in your project.

To access the code files for this exercise, refer to https://packt.live/36PPYdd.

  1. Open a command-line terminal, navigate into the Exercise1.04 folder, and run the following commands in order:
    > cd Exercise1.04/
    > code .
    > yarn
    > yarn serve

    Go to https://localhost:8080.

  2. Inside of Exercise1-04.vue, compose the following code:
    <template>
      <div>
        <h1>{{ title }}</h1>
        <h2>{{ subtitle }}</h2>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          title: 'CSS module component!',
          subtitle: 'The fourth exercise',
        }
      },
    }
    </script>
  3. Add the <style> block with the SCSS language and add module as an attribute instead of scoped:
    <style lang="scss" module>
    h1,
    h2 {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      text-align: center;
    }
    .title {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      color: #2c3e50;
      margin-top: 60px;
    }
    .subtitle {
      color: #4fc08d;
      font-style: italic;
    }
    </style>
  4. To use CSS modules in your template, you need to bind them to your HTML elements by using :class syntax, which is the same as the v-bind:class directive:
    <h1 :class="$style.title">{{ title }}</h1>
    <h2 :class="$style.subtitle">{{ subtitle }}</h2>

    When you save, your project should look something like this:

    Figure 1.14: Exercise 1.04 output using CSS modules

Figure 1.14: Exercise 1.04 output using CSS modules

If you inspect the virtual DOM, you will see how it has applied unique class names to the bound elements:

Figure 1.15: The virtual DOM tree's generated CSS module class

Figure 1.15: The virtual DOM tree's generated CSS module class

In this exercise, we saw how to use CSS modules in your Vue components and how it works differently to CSS scoping. In the next exercise, we will learn how to write a template in PUG (HAML).

Note

In combination with file splitting and importing SCSS, CSS modules are the preferred method of scoping component styling here. This safely ensures that individual component styles and business rules do not risk overriding each other and do not pollute global styling and variables with component-specific styling requirements. Readability is important. The class name also hints to the component name as opposed to the v-data attribute, which can be good when debugging large projects.

Exercise 1.05: Writing a Component Template in PUG (HAML)

With the right loader enabled you can use HTML abstractions such as PUG and HAML to template your Vue components instead of writing HTML.

To access the code files for this exercise, refer to https://packt.live/2IOrHvN.

  1. Open a command-line terminal and navigate into the Exercise1.05 folder and run the following commands in order:
    > cd Exercise1.05/
    > code .
    > yarn

    Go to https://localhost:8080.

  2. If Vue is running in the command line, press Ctrl + C to stop the instance. Then run the following command:
    vue add pug
    yarn serve
  3. Inside of Exercise1-05.vue, compose the following code and specify the lang attribute pug on the <template> tag:
    <template lang="pug">
      div
        h1(class='title') {{ title }}
    </template>
    <script>
    export default {
      data() {
        return {
          title: 'PUG component!',
        }
      },
    }
    </script>
    <style lang="scss">
    .title {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

    The preceding code will generate the following output:

    Figure 1.16: Output for the PUG exercise

Figure 1.16: Output for the PUG exercise

In this exercise, we saw how to use other HTML languages for templating and to interpolate data in PUG format. After installing the Vue.js PUG plugin you can write your component syntax inside of these template tags using PUG by adding the lang attribute with the value pug.