Category: Vue

Users will feel happier if the app we make loads faster.

This can be done with a few tricks with Vue apps.

In this article, we’ll look at what we can do to speed up our Vue apps.

Lazy Load Route Components

We can make our Vue route components load only when it’s needed.

To do that, we can use the JavaScript import function to import ou component.

For example, we can write:

import Vue from 'vue'
import Router from 'vue-router'

const Home = () => import('./routes/Home.vue');
const Settings = () => import('./routes/Settings.vue');

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/', component: Home },
    { path: '/settings', component: Settings }
  ]
})

We have functions that returns promises for the component modules via the import function.

Since it’s not imported at build time, it’ll only be loaded when it’s needed.

Users have to download less code at the beginning so the loading speed will be faster.

The chunks can be controlled by adding the webpackChunkName comment.

For example, we can write:

const Profile = () => import(/* webpackChunkName: "profile" */'./routes/Profile.vue');
const ProfileSettings = () => import(/* webpackChunkName: "profile" */'./routes/ProfileSettings.vue');

We bundle the profile chunk with the webpackChunkName comment.

Minimize the Use of External Libraries

Reducing the number of libraries also reduce the bundle size, so the loading speed of our app will also be faster.

We can do a lot with JavaScript’s standard libraries.

For example, we can use native array methods instead of Lodash’s array methods.

Compress and Optimize Images

Images can be compressed a lot, so we should do that to reduce load time.

Also, we can load images from CDN so that we can serve them from a high-capacity server.

Lazy Load Images

Lazy loading images means that we load them only when we need to see them.

This can be done easily with the vue-lazyload package.

To install it, we run:

npm i vue-lazyload

Then in main.js , we add:

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)

to register the plugin.

Then we can add:

<img v-lazy="image.src" >

in our template to use it. The v-lazy directive is made available from the plugin.

Reuse Functionalities Across Our App

Reusing functionality makes our app easier to change since we only have to change one place.

Also, we write less code so that the bundle is smaller.

Therefore, it’s faster to write and to faster to load for the user.

For example, with the VueNotifications library, we can write:

import VueNotifications from 'vue-notifications'
import miniToastr from 'mini-toastr'

miniToastr.init()

function toast ({title, message, type, timeout, cb}) {
  return miniToastr[type](message, title, timeout, cb)
}

const options = {
  success: toast,
  error: toast,
  info: toast,
  warn: toast
}

Vue.use(VueNotifications, options)

to create a toast function and then use it to display all kinds of toasts with it.

mini-toastr is a small notification library we can use to display notifications.

Conclusion

We can optimize the speed of our Vue app easily with some easy tricks.

Creating tables from scratch is a pain.

This is why there are many table plugins to let us add tables easily.

In this article, we’ll look at how to add tables to a Vue app with the vue-good-table plugin.

Collapsable Groups

We can make the table group collapsible by changing the group-options prop.

To do this, we can write:

<template>
  <div>
    <vue-good-table
      :columns="columns"
      :rows="rows"
      :group-options="{
        enabled: true,
        collapsable: true
      }"
    ></vue-good-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      columns: [
        {
          label: "Name",
          field: "name"
        },
        {
          label: "Age",
          field: "age",
          type: "number"
        },
        {
          label: "Birthday",
          field: "birthDay",
          type: "date",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy"
        }
      ],
      rows: [
        {
          mode: "span",
          label: "Humans",
          html: false,
          children: [
            { id: 1, name: "John", age: 20, birthDay: "2000-01-20" },
            { id: 2, name: "Jane", age: 24, birthDay: "1996-10-31" },
            { id: 3, name: "Mary", age: 16, birthDay: "2004-10-30" }
          ]
        }
      ]
    };
  }
};
</script>

We set the collapsible property to true to make the group collapsible.

Themes

We can change the theme of the table to change the color scheme.

To do that, we can add the theme prop:

<template>
  <div>
    <vue-good-table :columns="columns" :rows="rows" theme="black-rhino"></vue-good-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      columns: [
        {
          label: "Name",
          field: "name"
        },
        {
          label: "Age",
          field: "age",
          type: "number"
        },
        {
          label: "Birthday",
          field: "birthDay",
          type: "date",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy"
        }
      ],
      rows: [
        { id: 1, name: "John", age: 20, birthDay: "2000-01-20" },
        { id: 2, name: "Jane", age: 24, birthDay: "1996-10-31" },
        { id: 3, name: "Mary", age: 16, birthDay: "2004-10-30" }
      ]
    };
  }
};
</script>

We set the theme prop to 'black-rhino' to display the header row in black and the cells in gray.

Style Classes

We can also style our table by using the selectors for the table.

To do that, we can add the styleClass prop to set the class name for the table.

For example, we can write:

<template>
  <div>
    <vue-good-table :columns="columns" :rows="rows" styleClass="vgt-table"></vue-good-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      columns: [
        {
          label: "Name",
          field: "name"
        },
        {
          label: "Age",
          field: "age",
          type: "number"
        },
        {
          label: "Birthday",
          field: "birthDay",
          type: "date",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy"
        }
      ],
      rows: [
        { id: 1, name: "John", age: 20, birthDay: "2000-01-20" },
        { id: 2, name: "Jane", age: 24, birthDay: "1996-10-31" },
        { id: 3, name: "Mary", age: 16, birthDay: "2004-10-30" }
      ]
    };
  }
};
</script>

<style>
.vgt-table {
  border: 1px solid red !important;
}
</style>

We set the styleClass to the class name we want for our table.

Then we can add the style tag to set the border for the table.

Conclusion

We can add collapsible rows for grouped tables.

And we can add style classes for our table to make styling easier.

Creating tables from scratch is a pain.

This is why there are many table plugins to let us add tables easily.

In this article, we’ll look at how to add tables to a Vue app with the vue-good-table plugin.

.vgt-table .striped

We can add row striping with the striped class.

For example, we can write:

<template>
  <div>
    <vue-good-table :columns="columns" :rows="rows" styleClass="vgt-table striped"></vue-good-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      columns: [
        {
          label: "Name",
          field: "name"
        },
        {
          label: "Age",
          field: "age",
          type: "number"
        },
        {
          label: "Birthday",
          field: "birthDay",
          type: "date",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy"
        }
      ],
      rows: [
        { id: 1, name: "John", age: 20, birthDay: "2000-01-20" },
        { id: 2, name: "Jane", age: 24, birthDay: "1996-10-31" },
        { id: 3, name: "Mary", age: 16, birthDay: "2004-10-30" }
      ]
    };
  }
};
</script>

<style>
.vgt-table {
  border: 1px solid red !important;
}
</style>

Now the rows are striped.

.vgt-table .bordered

We can make the table row bordered with the bordered class.

For example, we can write:

<template>
  <div>
    <vue-good-table :columns="columns" :rows="rows" styleClass="vgt-table bordered"></vue-good-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      columns: [
        {
          label: "Name",
          field: "name"
        },
        {
          label: "Age",
          field: "age",
          type: "number"
        },
        {
          label: "Birthday",
          field: "birthDay",
          type: "date",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy"
        }
      ],
      rows: [
        { id: 1, name: "John", age: 20, birthDay: "2000-01-20" },
        { id: 2, name: "Jane", age: 24, birthDay: "1996-10-31" },
        { id: 3, name: "Mary", age: 16, birthDay: "2004-10-30" }
      ]
    };
  }
};
</script>

We add the bordered class to add borders to rows and columns.

Condensed Table

To make the table condensed, we can add the condensed class:

<template>
  <div>
    <vue-good-table :columns="columns" :rows="rows" styleClass="vgt-table condensed"></vue-good-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      columns: [
        {
          label: "Name",
          field: "name"
        },
        {
          label: "Age",
          field: "age",
          type: "number"
        },
        {
          label: "Birthday",
          field: "birthDay",
          type: "date",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy"
        }
      ],
      rows: [
        { id: 1, name: "John", age: 20, birthDay: "2000-01-20" },
        { id: 2, name: "Jane", age: 24, birthDay: "1996-10-31" },
        { id: 3, name: "Mary", age: 16, birthDay: "2004-10-30" }
      ]
    };
  }
};
</script>

Sass

We can import SASS styling provided by the vue-good-table library by writing:

<template>
  <div>
    <vue-good-table :columns="columns" :rows="rows" styleClass="vgt-table condensed"></vue-good-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      columns: [
        {
          label: "Name",
          field: "name"
        },
        {
          label: "Age",
          field: "age",
          type: "number"
        },
        {
          label: "Birthday",
          field: "birthDay",
          type: "date",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy"
        }
      ],
      rows: [
        { id: 1, name: "John", age: 20, birthDay: "2000-01-20" },
        { id: 2, name: "Jane", age: 24, birthDay: "1996-10-31" },
        { id: 3, name: "Mary", age: 16, birthDay: "2004-10-30" }
      ]
    };
  }
};
</script>

<style lang="scss">
@import "../node_modules/vue-good-table/src/styles/style.scss";
</style>

The @import directive lets us import styles into our app.

Conclusion

We can add styles with various methods with the vue-good-table plugin.

Creating tables from scratch is a pain.

This is why there are many table plugins to let us add tables easily.

In this article, we’ll look at how to add tables to a Vue app with the vue-good-table plugin.

Selected Row Action Slot

We can populate the selected-row-actions slot so that we can add our own content to display when table rows are selected.

To do this, we can write:

<template>
  <div>
    <vue-good-table :columns="columns" :rows="rows" :select-options="{
    enabled: true,
  }">
      <div slot="selected-row-actions">
        <button>Action 1</button>
      </div>
    </vue-good-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      columns: [
        {
          label: "Name",
          field: "name"
        },
        {
          label: "Age",
          field: "age",
          type: "number"
        },
        {
          label: "Birthday",
          field: "birthDay",
          type: "date",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy"
        },
        {
          label: "Before",
          field: "before"
        }
      ],
      rows: [
        { id: 1, name: "John", age: 20, birthDay: "2000-01-20" },
        { id: 2, name: "Jane", age: 24, birthDay: "1996-10-31" },
        { id: 3, name: "Mary", age: 16, birthDay: "2004-10-30" }
      ]
    };
  }
};
</script>

to add a button to the container that shows the number of rows selected.

Grouped Table

We can add a grouped table with the group-options prop.

For example, we can write:

<template>
  <div>
    <vue-good-table :columns="columns" :rows="rows" :group-options="{
    enabled: true
  }"></vue-good-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      columns: [
        {
          label: "Name",
          field: "name"
        },
        {
          label: "Age",
          field: "age",
          type: "number"
        },
        {
          label: "Birthday",
          field: "birthDay",
          type: "date",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy"
        },
        {
          label: "Before",
          field: "before"
        }
      ],
      rows: [
        {
          mode: "span",
          label: "Humans",
          html: false,
          children: [
            { id: 1, name: "John", age: 20, birthDay: "2000-01-20" },
            { id: 2, name: "Jane", age: 24, birthDay: "1996-10-31" },
            { id: 3, name: "Mary", age: 16, birthDay: "2004-10-30" }
          ]
        }
      ]
    };
  }
};
</script>

to add a group by changing the rows array into an object with various properties.

The mode is set to 'span' which means the header will span all columns.

labels is the label to display in the header.

html set to true means that the label will be rendered as HTML.

The heading will be displayed above the group.

We can customize the heading with the table-header-row slot.

For example, we can write:

<template>
  <div>
    <vue-good-table
      :columns="columns"
      :rows="rows"
      :group-options="{
        enabled: true,
        headerPosition: 'top'
      }"
    >
      <template slot="table-header-row" slot-scope="props">
        <span v-if="props.column && props.column.field === 'name'">
          {{props.row.label}}
          <button class="fancy-btn">Action</button>
        </span>
        <span v-else>{{ props.formattedRow[props.column.field] }}</span>
      </template>
    </vue-good-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      columns: [
        {
          label: "Name",
          field: "name"
        },
        {
          label: "Age",
          field: "age",
          type: "number"
        },
        {
          label: "Birthday",
          field: "birthDay",
          type: "date",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy"
        }
      ],
      rows: [
        {
          label: "Humans",
          html: false,
          children: [
            { id: 1, name: "John", age: 20, birthDay: "2000-01-20" },
            { id: 2, name: "Jane", age: 24, birthDay: "1996-10-31" },
            { id: 3, name: "Mary", age: 16, birthDay: "2004-10-30" }
          ]
        }
      ]
    };
  }
};
</script>

to add the group heading.

We populate the table-header-row slot to populate the heading.

Also, we set the headerPosition to 'top' to place the group heading above the rows.

The mode property is removed so that we can display the custom heading within the Name column.

Conclusion

We can display table rows in groups with vue-good-table.

Also, we can add content for the select row display.

Creating tables from scratch is a pain.

This is why there are many table plugins to let us add tables easily.

In this article, we’ll look at how to add tables to a Vue app with the vue-good-table plugin.

Adding Custom Columns

We can add columns that aren’t created from the properties of row objects.

For instance, we can write:

<template>
  <div>
    <vue-good-table :columns="columns" :rows="rows">
      <template slot="table-row" slot-scope="props">
        <span v-if="props.column.field === 'before'">before</span>
        <span v-else>{{props.formattedRow[props.column.field]}}</span>
      </template>
    </vue-good-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          label: "Name",
          field: "name"
        },
        {
          label: "Age",
          field: "age",
          type: "number"
        },
        {
          label: "Birthday",
          field: "birthDay",
          type: "date",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy"
        },
        {
          label: "Before",
          field: "before"
        }
      ],
      rows: [
        { id: 1, name: "John", age: 20, birthDay: "2000-01-20" },
        { id: 2, name: "Jane", age: 24, birthDay: "1996-10-31" },
        { id: 3, name: "Mary", age: 16, birthDay: "2004-10-30" }
      ]
    };
  }
};
</script>

We populate the table-row slot with the content that we want to display in the cells for the column.

props.formattedRow[props.column.field] displays the data from the row object properties.

props.column.field has the field name.

The columns array is updated to have the 'before' column that isn’t created from the row property.

Custom Column Headers

We can also create custom column headers.

To do that, we populate the table-column slot with our own content

Then we can check the props.column.label to check for the column heading that we want to change.

For example, we can write:

<template>
  <div>
    <vue-good-table :columns="columns" :rows="rows">
      <template slot="table-column" slot-scope="props">
        <span v-if="props.column.label === 'Name'">
          <em>{{props.column.label}}</em>
        </span>
        <span v-else>{{props.column.label}}</span>
      </template>
    </vue-good-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          label: "Name",
          field: "name"
        },
        {
          label: "Age",
          field: "age",
          type: "number"
        },
        {
          label: "Birthday",
          field: "birthDay",
          type: "date",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy"
        }
      ],
      rows: [
        { id: 1, name: "John", age: 20, birthDay: "2000-01-20" },
        { id: 2, name: "Jane", age: 24, birthDay: "1996-10-31" },
        { id: 3, name: "Mary", age: 16, birthDay: "2004-10-30" }
      ]
    };
  }
};
</script>

We have the table-column slot with the prop.column.label check to check for the column heading that we want to change.

We make the Name column display with an italicized font with the em tag.

Checkbox Table

We can add a table with rows that are selectable.

To do that, we can write:

<template>
  <div>
    <vue-good-table
      :columns="columns"
      :rows="rows"
      :select-options="{
        enabled: true,
        selectOnCheckboxOnly: true,
        selectionInfoClass: 'selected',
        selectionText: 'rows selected',
        clearSelectionText: 'clear',
        disableSelectInfo: true,
        selectAllByGroup: true,
      }"
    ></vue-good-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          label: "Name",
          field: "name"
        },
        {
          label: "Age",
          field: "age",
          type: "number"
        },
        {
          label: "Birthday",
          field: "birthDay",
          type: "date",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy"
        }
      ],
      rows: [
        { id: 1, name: "John", age: 20, birthDay: "2000-01-20" },
        { id: 2, name: "Jane", age: 24, birthDay: "1996-10-31" },
        { id: 3, name: "Mary", age: 16, birthDay: "2004-10-30" }
      ]
    };
  }
};
</script>

We add the selected-options prop with an object.

The enabled property lets us enable row selection.

selectOnCheckOnly lets us select rows when we check off the checkbox.

selectionText lets us display the number of rows selected with our own text.

clearSelectionText is the text to display on the link to clear the selections.

disableSelectInfo lets us disable the selected row info. This info should be displayed above the table if it’s false .

And selectAllByGroup lets us set whether we can select all the rows at once.

Conclusion

We can change columns and rows to display what we want by populating slots.

Also, we can make rows selectable.