Jennifer Bland header image
≡ Menu

Creating Custom Directives in Vue.js

by

Directives are special attributes with the v- prefix. A directive’s job is to reactively apply side effects to the DOM when the value of its expression changes. Vue.js provides a wide range of directives for you to use. You have probably already used the v-if, v-repeat, v-model and v-show directives.

In this article, I am going to explain the parts of a directive and what is available to use. Then I will show you how to create a wide range of custom directives so that you can apply your programming needs directly to DOM elements. So let’s get started discussing what is included with a directive.

Name of Directive

The most basic custom directive only has a name. It does not accept any arguments nor does it have any modifiers. Without passing a value, this would not be very flexible, but you could still have some piece of functionality of the DOM element.

[continue reading…]

How to implement horizontal scrolling using Flexbox

by

If you create websites, chances are you have been asked to create a horizontal scrolling component. It is extremely easy to implement this using just a few lines of Flexbox. Let me show you how.

Project Layout

We need to create a container that will contain all the images that we want to scroll. Here is the code:

[continue reading…]

Adding Internationalization to a Vue Application

by

¡Hola. Bonjour. Ciao. 你好. Here is how you add internationalization to Vue.

My company has plants in 37 countries. We write applications for the employees at these plants. Our application has to be translated into their native language. You can easily add internationalization to your Vue application. Let me show you how to add internationalization to the default Vue application.

Creating Our Application

We will be creating an application using the Vue CLI. If you do not have it installed you can install it with this command:

npm install @vue/cli -g

The -g flag will install the Vue CLI globally. Now that we have the CLI installed we can create a new application. Enter this command to create the application:

vue create vue-internationalization

The Vue CLI will prompt you to pick a preset. You have the option of selecting the default preset or manually selecting features. I chose default.

[continue reading…]

SPA Application using Vue.js, Vuex, Vuetify, and Firebase (Part 4)

by

Learn how to create a meal delivery website using Vue.js, Vuex, Vue Router, and Firebase.

This is part four of my four-part series on building a Vue application. Here is a list of all the parts:

Part 1: Installing Vue and Building an SPA using Vuetify and Vue Router

Part 2: Using Vue Router

Part 3: Using Vuex and accessing API

Part 4: Using Firebase for Authentication

Recap

In the first part of this series, we created our Vue application using the Vue CLI. Also, we added Vuetify to the app. We used Vuetify to style our home page.

In the second part, we used Vue Router to add navigation between the different pages of our app. We added components for all the pages in our application.

In the third part, we were introduced to Vuex. We signed up for an API to provide recipes and used axios to retrieve them. This data was stored in the Vuex store which made it accessible to every component in the application.

[continue reading…]

SPA Application using Vue.js, Vuex, Vuetify, and Firebase (Part 3)

by

Learn how to create a meal delivery website using Vue.js, Vuex, Vue Router, and Firebase.

This is part three of my four-part series on building a Vue application. Here is a list of all the parts:

Part 1: Installing Vue and Building an SPA using Vuetify and Vue Router

Part 2: Using Vue Router

Part 3: Using Vuex and accessing API

Part 4: Using Firebase for Authentication

Recap

In the first part of this series, we created our Vue application using the Vue CLI. Also, we added Vuetify to the app. We used Vuetify to style our home page.

In the second part, we used Vue Router to add navigation between the different pages of our app. We added components for all the pages in our application.

[continue reading…]