Recently, Vue has had an increase in popularity which has fueled an interest in Nuxt.js – a framework used to build robust and universal applications with Vue. While building robust applications, it’s important to provide a clear path towards testing as this will reduce the time spent debugging and code refactoring. In this article, we’re going to take a look at how we can set up a game store application with Nuxt.js and test its components. The main prerequisite in understanding this post is the basic knowledge of Vue and Nuxt.js.

Setting up a Nuxt.js application

Our first step to creating an application with Nuxt.js would be to install it in the folder of our project. In the terminal, let’s navigate to our project folder and input the following command:

npm install nuxt

Still using the terminal, in our project folder – we’ll create our application via npx(which is shipped by default since npm 5.2.0):

npx create-nuxt-app game-store

This will take us through a list of options – here your options may differ, below is a guide detailing what was selected in creating the application we’ll be working with:

? Project name: game-store
? Programming language: JavaScript
? Package manager: NPM
? UI Framework: None
? Nuxt.js modules: None
? Linting tools: None
? Testing framework: Jest
? Rendering mode: Single Page App
? Deployment target: Static
? Development tools: jsconfig.json
? Version Control System: Git

Once we’re done creating the application, we can navigate to it via our terminal and launch it in the browser:

cd game-stores
npm run dev

Once this is done, our window should appear:

We should also have a project folder structure similar to this:

Configuring our store

To manage state efficiently, Nuxt can leverage the abilities of Vuex. This enables every file created in the /store directory to be treated as a Vuex module (i.e it contains its own state, mutation, action, and getters). We’ll use our store directory as a starting point for our application. Let’s begin by including the data we need – here’s a sample:

// store/games.js

const games = [
  {
    title: "Killzone: Shadow Fall",
    console: "PlayStation 4",
    rating: 8.5
  },
  {
    title: "Star Wars Battlefront 2",
    console: "PlayStation 4",
    rating: 8
  },
  {
    title: "Metro: Exodus",
    console: "PlayStation 5",
    rating: 9
  },
  {
    title: "BioShock: The Collection",
    console: "PlayStation 4",
    rating: 7.5
  }
  {
    title: "Battlefield V",
    console: "PlayStation 5",
    rating: 8
  }
];

Next, we’ll configure the state, mutation, action, and getters of this file – we want our store to display only PlayStation 4 titles:

// store/games.js

const state = () => {
    return games;
  };

  const mutations = {
  };

  const actions = {};

  const getters = {
    byConsole (state) {
      return (consoleName) => {
        return state.filter(({ console }) => {
          return console.toLowerCase() === consoleName.toLowerCase()
        });
      }
    },
    playstationfour(state) {
      return state.filter(({ console }) => {
        return console === 'PlayStation 4'
      });
    }
  };

  export default { state, mutations, actions, getters };

Next, we’ll map the state of our store to the browser. This will be done by replacing the default view we have in pages/index.vue:

<!-- pages/index.vue -->
<template>
  <section>
    <h2 class="title">PlayStation 4 Bestsellers</h2>
    <ul class="games">
      <li v-for="game in psfourGames" :key="game.title">
        {{game.title}}
      </li>
    </ul>
  </section>
</template>

Then we’ll use Vuex’s MapGetter helper to map the previously defined getter in games.js to a computed property in our index.vue file:

<!-- pages/index.vue -->
<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters({
      byConsole: 'games/byConsole'
    }),
    psfourGames () {
      return this.byConsole('PlayStation 4')
    }
  }
}
</script>

Let’s take a look at how this appears in the browser. Navigate to your terminal and run npm run dev – your browser view should be similar to this:

#nuxt #vue #javascript #testing #developer