Building Vue Applications with Nuxt.js

This is post 1 of 3 in the series “Building Vue applications with Nuxt.js”

1. Building Vue Applications with Nuxt.js
2. Building Vue Applications with Nuxt.js Part 2: Firebase
3. Building Vue Applications with Nuxt.js Part 3: Firebase Pagination

This is the first part of a three-part blog series that will introduce you to Nuxt.js, a higher-level framework that builds on top of Vue. In Part 1 of this tutorial, we will create a base project  setting up Vuetify.

In this blog series, we will build an app with an enhanced look and feel using Vuetify, a Material-UI library built for Vue. Vuetify adheres to Google’s Material Design, giving us access to a huge library of components for building beautiful, functional, and highly customizable applications with minimal code. By the end of this tutorial, we will have a small Material Design table with server-side pagination and a complete example to create, update, delete, and display information using Nuxt.js and Firebase.

Step 1: Setting up our Nuxt Project

Creating our project

To add Vuetify to the Nuxt application, follow these steps:

1. Run the CLI initialization command:

npx create-nuxt-app

2. For options:

• Project name: nuxt-vuetify

• Programming language: JavaScript

• Package manager: npm • UI Framework: None (we’ll manually add it in step 2)

• Node.js modules: select Axios as we’ll be using this

• The rest of the options can be left as default

3. Run the application:

npm run dev

4. A page like the following will show up:

Step 2: Setting up Vuetify

We’ll base the structure of this project on the Nuxt boilerplate that we built in this two-part series.

Installing Vuetify with Nuxt

To add Vuetify to the Nuxt application, follow these steps:

5. Run npm install:

npm install @nuxtjs/vuetify -D

6. Add the Vuetify module under our nuxt.config.js buildModules attribute:

buildModules: ['@nuxtjs/vuetify']

And that’s it! We can now use any Vuetify component.

Vuetify layout fundamentals

The v-app component is required for all Vuetify applications. It helps bootstrap styling and ensures cross-browser support. We can place any component from the component library into it like this:

        <v-app>
           <v-container>Hello world</v-container>
        </v-app>

Grid system

Vuetify includes a 12-slot grid system that is created using flexbox; this allows us to create responsive layouts with the following breakpoints:

Layouts are composed of four main components:

1. v-container: Provides the ability to align content horizontally and vertically and pad the site’s content.

2. v-row: Wrapper component that creates a new row on the layout.

3. v-col: Component that must be directly under v-row; separates the layout into columns.

4. v-spacer: Spacers are used to distribute the remaining width within a layout.

<v-app>
  <v-container class="grey lighten-5">
     <v-row
        class="px-8"
        style="display: flex; flex-wrap: wrap;"
        >
            <v-col
              v-for="column in [1,2,3,4,5,6]"
              lg="3"
              md="6"
              sm="12"
            >
                <v-card>
                    col-{{ column }}
                </v-card>
           </v-col>
    </v-row>
  </v-container>
</v-app>

This gives us a responsive layout like the following:

Large Screen

Medium Screen

Small Screen

Building a data table

Vuetify provides a simple, yet powerful and highly customizable data table component that includes capabilities like sorting and pagination.

       <v-main>
  <v-container>
    <v-row
        class="py-8"
        justify="center"
        >
        <v-col
            cols="12"
        >
          <v-card >
            <v-data-table
            :headers="headers
            :footer-props="footerProps"
            :items="gorillas"
            :items-per-page="5"
            class="elevation-1"
            >
              <template v-slot:[`item.actions`]="{ item }">
                <v-icon
                    small
                    @click="removeGorilla(item)"
                >
                  mdi-delete
                </v-icon>
              </template>
              <template v-slot:[`item.imageUrl`]="{ item }">
                <div class="p-2">
                  <v-img :src="item.imageUrl" :alt="item.name" height="100px" width="100px"></v-img>
                </div>
              </template>
            </v-data-table>
          </v-card>
        </v-col>
    </v-row>
  </v-container>
</v-main>    
...
<script>
export default {
    data(){ 
      return {
        gorillas: [
          {
            name: 'Gorilla Logic',
            description: 'Unstoppable Gorilla Band',
            imageUrl: 'https://content.gorillalogic.com/img/2018/08/GL_Logo_Primary_Wht_500-1.png'
          }
        ],
        headers: [
          {
            text: 'Image',
            value: 'imageUrl',
            sortable: false
          },
          {
            text: 'Name',
            value: 'name',
            width: '150px'
          },
          {
            text: 'Description',
            value: 'description',
            sortable: false
          },
          { text: 'Actions', value: 'actions', sortable: false },
          ],
          footerProps: {
            'items-per-page-options': [3, 5, 10],
          },
        }
     }
} 

This results in a table like this:

Let’s break down each part.

Props

      :headers="headers"
:items="gorillas"
:items-per-page="5"

The data table includes a variety of props that allow us to use the built-in functionality and personalize it for more specific use cases. We can bind the headers, which will determine how data is displayed, the items we want to display on the table, and pagination options, such as how many items are selected per page.

Headers

        headers: [
          {
            text: 'Image',
            value: 'imageUrl',
            sortable: false
          },
          {
            text: 'Name',
            value: 'name',
            width: '150px'
          },
          {
            text: 'Description',
            value: 'description',
            sortable: false
          },
          { text: 'Actions', value: 'actions', sortable: false },
]

Headers determine how an attribute will be displayed on the table, such as alignment options, whether the object is sortable, the header display text, and the attribute name within the object.

Items

The item array is a simple, very flexible object with the data that will be displayed on the data table. This allows us to do all sorts of things, such as filtering and selecting the existing items. 

Slots

Vuetify allows us to configure everything inside the data table component. This can be done by using slots. In the example above, we used the item.<name> slot provided in the data table component to configure how the image attribute is displayed.

Wrapping up our simple Nuxt.js tutorial

With that, we’re done setting up our project! Remember that you can download and check the final repo here.

I hope that you enjoyed this Nuxt.js, and Vuetify tutorial. Vuetify adds great usability to an already powerful framework, making it possible to create complex solutions with minimal effort. The customizability and wide array of components make it a perfect companion for projects of any size and difficulty.

In the next entry of the series, we’ll go more in-depth, creating a form to add records to our table, while also setting up firebase as a data source for our blogs.