Tag: Nuxt


Deprecated: Function create_function() is deprecated in /home2/thebrand/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 1884
02-landing-page-with-incidents-list
26 May

Getting Started With Axios In Nuxt

by TBSCategories: News

Getting Started With Axios In Nuxt

Getting Started With Axios In Nuxt

Timi Omoyeni

Nuxt.js provides an Axios module for easy integration with your application. Axios is a promise-based HTTP client that works in the browser and Node.js environment or, in simpler terms, it is a tool for making requests (e.g API calls) in client-side applications and Node.js environment.

In this tutorial, we’re going to learn how to use the Axios module and how to make a request on the server-side using asyncData and fetch. These two methods make a request on the server-side but they have some differences which we’re also going to cover. Finally, we’ll learn how to perform authentication and secure pages/routes using the auth module and auth middleware.

This article requires basic knowledge of Nuxtjs and Vuejs as we’ll be building on top of that. For those without experience with Vuejs, I recommend you start from their official documentation and the Nuxt official page before continuing with this article.

What Is The Nuxt.js Axios Module?

According to the official Documentation,

“It is a Secure and easy Axios integration with Nuxt.js.”

Here are some of its features:

  1. Automatically set base URL for client-side & server-side.
  2. Proxy request headers in SSR (Useful for auth).
  3. Fetch Style requests.
  4. Integrated with Nuxt.js Progressbar while making requests.

To use the axios module in your application, you will have to first install it by using either npm or yarn.

YARN

yarn add @nuxtjs/axios

NPM

npm install @nuxtjs/axios

Add it into your nuxt.config.js file:

modules: [     '@nuxtjs/axios',   ],    axios: {     // extra config e.g     // BaseURL: 'https://link-to-API'   }

The modules array accepts a list of Nuxt.js modules such as dotenv, auth and in this case, Axios. What we’ve done is to inform our application that we would be using the Axios module, which we reference using @nuxtjs/axios. This is then followed by the axios property which is an object of configurations like the baseURL for both client-side and server-side.

Now, you can access Axios from anywhere in your application by calling this.$ axios.method or this.$ axios.$ method. Where method can be get, post, or delete.

Making Your First Request Using Axios

For this tutorial, I’ve put together a simple application on Github. The repository contains two folders, start and finish, the start folder contains all you need to get right into the tutorial. The finish folder contains a completed version of what we would be building.

After cloning the repo and opening the start folder, we would need to install all our packages in the package.json file so open your terminal and run the following command:

npm install

Once that is done, we can start our app using the npm run dev command. This is what you should see when you go to localhost:3000.

A page with header containing a logo and navigation links.
Our application’s landing page. (Large preview)

The next thing we have to do is to create a .env file in the root folder of our application and add our API URL to it. For this tutorial, we’ll be using a sample API built to collect reports from users.

API_URL=https://ireporter-endpoint.herokuapp.com/api/v2/

This way, we do not have to hard code our API into our app which is useful for working with two APIs (development and production).

The next step would be to open our nuxt.config.js file and add the environmental variable to our axios config that we added above.

/*    ** Axios module configuration    */   axios: {     // See https://github.com/nuxt-community/axios-module#options     baseURL: process.env.API_URL,   },

Here, we tell Nuxt.js to use this baseURL for both our client-side and server-side requests whenever we use this Axios module.

Now, to fetch a list of reports, let us open the index.vue file and add the following method to the script section.

async getIncidents() {   let res = await this.$ store.dispatch("getIncidents");   this.incidents = res.data.data.incidents; }

What we have done is to create an async function that we call getIncidents() and we can tell what it does from the name — it fetches a list of incidents using the Vuex store action method this.$ store.dispatch. We assign the response from this action to our incidents property so we can be able to make use of it in the component.

We want to call the getIncidents() method whenever the component mounts. We can do that using the mounted hook.

mounted() {     this.getIncidents()   }

mounted() is a lifecycle hook that gets called when the component mounts. That will cause the call to the API to happen when the component mounts. Now, let us go into our index.js file in our store and create this action where we’ll be making our Axios request from.

export const actions = {   async getIncidents() {     let res = await this.$ axios.get('/incidents')     return res;   } }

Here, we created the action called getIncidents which is an async function, then we await a response from the server and return this response. The response from this action is sent back to our getIncidents() method in our index.vue file.

If we refresh our application, we should now be able to see a long list of incidents rendered on the page.

A list of dummy incidents.
List of incidents on landing page. (Large preview)

We have made our first request using Axios but we won’t stop there, we are going to be trying out asyncData and fetch to see the differences between them and using Axios.

AsyncData

AsyncData fetches data on the server-side and it’s called before loading the page component. It does not have access to this because it is called before your page component data is created. this is only available after the created hook has been called so Nuxt.js automatically merges the returned data into the component’s data.

Using asyncData is good for SEO because it fetches your site’s content on the server-side and also helps in loading content faster. Note that asyncData method can only be used in the pages folder of your application as it would not work in the components folder. This is because asyncData hook gets called before your component is created.

An Image showing the Nuxt life cycle.
Image from Nuxt blog. (Large preview)

Let us add asyncData to our index.vue file and observe how fast our incidents data loads. Add the following code after our components property and let us get rid of our mounted hook.

async asyncData({ $ axios }) {     let { data } = await $ axios.get("/incidents");     return { incidents: data.data.incidents };   },   // mounted() {   //   this.getIncidents();   // },

Here, the asyncData method accepts a property from the context $ axios. We use this property to fetch the list of incidents and the value is then returned. This value is automatically injected into our component. Now, you can notice how fast your content loads if you refresh the page and at no time is there no incident to render.

Fetch

The Fetch method is also used to make requests on the server-side. It is called after the created hook in the life cycle which means it has access to the component’s data. Unlike the asyncData method, the fetch method can be used in all .vue files and be used with the Vuex store. This means that if you have the following in your data function.

data() {     return {       incidents: [],       id: 5,       gender: 'male'     }; }

You can easily modify id or gender by calling this.id or this.gender.

Using Axios As A Plugin

During the process of development with Axios, you might find that you need extra configuration like creating instances and interceptors for your request so your application can work as intended and thankfully, we can do that by extending our Axios into a plugin.

To extend axios, you have to create a plugin (e.g. axios.js) in your plugins folder.

export default function ({   $ axios,   store,   redirect }) {   $ axios.onError(error => {     if (error.response && error.response.status === 500) {       redirect('/login')     }   })   $ axios.interceptors.response.use(     response => {       if (response.status === 200) {         if (response.request.responseURL && response.request.responseURL.includes('login')) {           store.dispatch("setUser", response);         }       }       return response     }   ) }

This is an example of a plugin I wrote for a Nuxt application. Here, your function takes in a context object of $ axios, store and redirect which we would use in configuring the plugin. The first thing we do is to listen for an error with a status of 500 using $ axios.onError and redirect the user to the login page.

We also have an interceptor that intercepts every request response we make in our application checks if the status of the response we get is 200. If that is true we proceed and check that there is a response.request.responseURL and if it includes login. If this checks out to be true, we then send this response using our store’s dispatch method where it then mutated in our state.

Add this plugin to your nuxt.config.js file:

plugins: [     '~/plugins/axios'   ]

After doing this, your Axios plugin would intercept any request you make and check if you have defined a special case for it.

Introduction To The Auth Module

The auth module is used for performing authentication for your Nuxt application and can be accessed from anywhere in your application using $ this.auth. It is also available in fetch, asyncData, middleware and NuxtInitServer from the context object as $ auth.

The context provides additional objects/params from Nuxt to Vue components and is available in special nuxt lifecycle areas like those mentioned above.

To use the auth module in your application, you would have to install it using yarn or npm.

YARN

yarn add @nuxtjs/auth

NPM

npm install @nuxtjs/auth

Add it to your nuxt.config.js file.

modules: [   '@nuxtjs/auth' ], auth: {   // Options }

The auth property accepts a list of properties such as strategies and redirect. Here, strategies accepts your preferred authentication method which can be:

  • local
    For username/email and password-based flow.
  • facebook
    For using Facebook accounts as a means of authentication.
  • Github
    For authenticating users with Github accounts.
  • Google
    For authenticating users with Google accounts.
  • Auth0
  • Laravel Passport

The redirect property accepts an object of links for:

  • login
    Users would be redirected to this link if login is required.
  • logout
    Users would be redirected here if after logout current route is protected.
  • home
    Users would be redirected here after login.

Now, let us add the following to our nuxt.config.js file.

/*  ** Auth module configuration  */ auth: {   redirect: {     login: '/login',     logout: '/',     home: '/my-reports'   },   strategies: {     local: {       endpoints: {         login: {           url: "/user/login",           method: "post",           propertyName: "data.token",         },         logout: false,         user: false,       },       tokenType: '',       tokenName: 'x-auth',       autoFetchUser: false     },   }, }

Please note that the auth method works best when there is a user endpoint provided in the option above.

Inside the auth config object, we have a redirect option in which we set our login route to /login, logout route to / and home route to /my-reports which would all behave as expected. We also have a tokenType property which represents the Authorization type in the header of our Axios request. It is set to Bearer by default and can be changed to work with your API.

For our API, there is no token type and this is why we’re going to leave it as an empty string. The tokenName represents the Authorization name (or the header property you want to attach your token to) inside your header in your Axios request.

By default, it is set to Authorization but for our API, the Authorization name is x-auth. The autoFetchUser property is used to enable user fetch object using the user endpoint property after login. It is true by default but our API does not have a user endpoint so we have set that to false.

For this tutorial, we would be using the local strategy. In our strategies, we have the local option with endpoints for login, user and logout but in our case, we would only use the *login* option because our demo API does not have a *logout* endpoint and our user object is being returned when *login* is successful.

Note: The auth module does not have a register endpoint option so that means we’re going to register the traditional way and redirect the user to the login page where we will perform the authentication using this.$ auth.loginWith. This is the method used in authenticating your users. It accepts a ‘strategy’ (e.g local) as a first argument and then an object to perform this authentication with. Take a look at the following example.

let data {           email: 'test@test.com',           password: '123456' } this.$ auth.loginWith('local', { data })

Using The Auth Module

Now that we have configured our auth module, we can proceed to our registration page. If you visit the /register page, you should see a registration form.

Register form page
Register page. (Large preview)

Let us make this form functional by adding the following code:

methods: {   async registerUser() {     this.loading = true;     let data = this.register;     try {       await this.$ axios.post("/user/create", data);       this.$ router.push("/login");       this.loading = false;       this.$ notify({         group: "success",         title: "Success!",         text: "Account created successfully"       });     } catch (error) {       this.loading = false;       this.$ notify({         group: "error",         title: "Error!",         text: error.response           ? error.response.data.error           : "Sorry an error occured, check your internet"       });     }   } }

Here, we have an async function called registerUser which is tied to a click event in our template and makes an Axios request wrapped in a try/catch block to an endpoint /user/create. This redirects to the /login page and notifies the user of a successful registration. We also have a catch block that alerts the user of any error if the request is not successful.

If the registration is successful, you would be redirected to the login page.

Login form page
Login page with notification component. (Large preview)

Here, we’re going to make use of auth authentication method this.$ auth.loginWith('local', loginData) after which we would use the this.$ auth.setUser(userObj) to set the user in our auth instance.

To get the login page working, let’s add the following code to our login.vue file.

methods: {   async logIn() {     let data = this.login;     this.loading = true;     try {       let res = await this.$ auth.loginWith("local", {         data       });       this.loading = false;       let user = res.data.data.user;       this.$ auth.setUser(user);       this.$ notify({         group: "success",         title: "Success!",         text: "Welcome!"       });     } catch (error) {       this.loading = false;       this.$ notify({         group: "error",         title: "Error!",         text: error.response           ? error.response.data.error           : "Sorry an error occured, check your internet"       });     }   } }

We created an async function called logIn using the auth method this.$ auth.loginWith('local, loginData). If this login attempt is successful, we then assign the user data to our auth instance using this.$ auth.setUser(userInfo) and redirect the user to the /my-report page.

You can now get user data using this.$ auth.user or with Vuex using this.$ store.state.auth.user but that’s not all. The auth instance contains some other properties which you can see if you log in or check your state using your Vue dev tools.

If you log this.$ store.state.auth to the console, you’ll see this:

{   "auth": {     "user": {       "id": "d7a5efdf-0c29-48aa-9255-be818301d602",       "email": "tmxo@test.com",       "lastName": "Xo",       "firstName": "Tm",       "othernames": null,       "isAdmin": false,       "phoneNumber": null,       "username": null     },     "loggedIn": true,     "strategy": "local",     "busy": false   } }

The auth instance contains a loggedIn property that is useful in switching between authenticated links in the nav/header section of your application. It also contains a strategy method that states the type of strategy the instance is running (e.g local).

Now, we will make use of this loggedIn property to arrange our nav links. Update your navBar component to the following:

<template>   <header class="header">     <div class="logo">       <nuxt-link to="/">         <Logo />       </nuxt-link>     </div>     <nav class="nav">       <div class="nav__user" v-if="auth.loggedIn">         <p>{{ auth.user.email }}</p>         <button class="nav__link nav__link--long">           <nuxt-link to="/report-incident">Report incident</nuxt-link>         </button>         <button class="nav__link nav__link--long">           <nuxt-link to="/my-reports">My Reports</nuxt-link>         </button>         <button class="nav__link" @click.prevent="logOut">Log out</button>       </div>       <button class="nav__link" v-if="!auth.loggedIn">         <nuxt-link to="/login">Login</nuxt-link>       </button>       <button class="nav__link" v-if="!auth.loggedIn">         <nuxt-link to="/register">Register</nuxt-link>       </button>     </nav>   </header> </template> <script> import { mapState } from "vuex"; import Logo from "@/components/Logo"; export default {   name: "nav-bar",   data() {     return {};   },   computed: {     ...mapState(["auth"])   },   methods: {     logOut() {       this.$ store.dispatch("logOut");       this.$ router.push("/login");     }   },   components: {     Logo   } }; </script> <style></style>

In our template section, we have several links to different parts of the application in which we are now using auth.loggedIn to display the appropriate links depending on the authentication status. We have a logout button that has a click event with a logOut() function attached to it. We also display the user’s email gotten from the auth property which is accessed from our Vuex store using the mapState method which maps our state auth to the computed property of the nav component. We also have a logout method that calls our Vuex action logOut and redirects the user to the login page.

Now, let us go ahead and update our store to have a logOut action.

export const actions = {     // ....   logOut() {     this.$ auth.logout();   } }

The logOut action calls the auth logout method which clears user data, deletes tokens from localStorage and sets loggedIn to false.

Routes like /my-reports and report-incident should not be visible to guests but at this point in our app, that is not the case. Nuxt does not have a navigation guard that can protect your routes, but it has is the auth middleware. It gives you the freedom to create your own middleware so you can configure it to work the way you want.

It can be set in two ways:

  1. Per route.
  2. Globally for the whole app in your nuxt.config.js file.
router: {   middleware: ['auth'] }

This auth middleware works with your auth instance so you do not need to create an auth.js file in your middleware folder.

Let us now add this middleware to our my-reports.vue and report-incident.vue files. Add the following lines of code to the script section of each file.

middleware: 'auth'

Now, our application would check if the user trying to access these routes has an auth.loggedIn value of true. It’ll redirect them to the login page using our redirect option in our auth config file — if you’re not logged in and you try to visit either /my-report or report-incident, you would be redirected to /login.

If you go to /report-incidents, this is what you should see.

Form for reporting incidents
Report incident page. (Large preview)

This page is for adding incidents but that right now the form does not send incident to our server because we are not making the call to the server when the user attempts to submit the form. To solve this, we will add a reportIncident method which will be called when the user clicks on Report. We’ll have this in the script section of the component. This method will send the form data to the server. Update your report-incident.vue file with the following:

<template>   <section class="report">     <h1 class="report__heading">Report an Incident</h1>     <form class="report__form">       <div class="input__container">         <label for="title" class="input__label">Title</label>         <input           type="text"           name="title"           id="title"           v-model="incident.title"           class="input__field"           required         />       </div>       <div class="input__container">         <label for="location" class="input__label">Location</label>         <input           type="text"           name="location"           id="location"           v-model="incident.location"           required           class="input__field"         />       </div>       <div class="input__container">         <label for="comment" class="input__label">Comment</label>         <textarea           name="comment"           id="comment"           v-model="incident.comment"           class="input__area"           cols="30"           rows="10"           required         ></textarea>       </div>       <input type="submit" value="Report" class="input__button" @click.prevent="reportIncident" />       <p class="loading__indicator" v-if="loading">Please wait....</p>     </form>   </section> </template> <script> export default {   name: "report-incident",   middleware: "auth",   data() {     return {       loading: false,       incident: {         type: "red-flag",         title: "",         location: "",         comment: ""       }     };   },   methods: {     async reportIncident() {       let data = this.incident;       let formData = new FormData();       formData.append("title", data.title);       formData.append("type", data.type);       formData.append("location", data.location);       formData.append("comment", data.comment);       this.loading = true;       try {         let res = await this.$ store.dispatch("reportIncident", formData);         this.$ notify({           group: "success",           title: "Success",           text: "Incident reported successfully!"         });         this.loading = false;         this.$ router.push("/my-reports");       } catch (error) {         this.loading = false;         this.$ notify({           group: "error",           title: "Error!",           text: error.response             ? error.response.data.error             : "Sorry an error occured, check your internet"         });       }     }   } }; </script> <style> </style>

Here, we have a form with input fields for title, location, and comment with two-way data binding using v-model. We also have a submit button with a click event. In the script section, we have a reportIncident method that collects all the information provided in the form and is sent to our server using FormData because the API is designed to also accept images and videos.

This formData is attached to a Vuex action using the dispatch method, if the request is successful, you get redirected to /my-reports with a notification informing you that this request was successful otherwise, you would be notified of an error with the error message.

At this point, we don’t have reportIncident action in our store yet so in your browser console, you would see an error if you try to click submit on this page.

error message that reads ‘[Vuex] unknown action type: reportIncident'
Vuex error message. (Large preview)

To fix this, add the reportIncident action your index.js file.

    export const actions = {   // ...   async reportIncident({}, data) {     let res = await this.$ axios.post('/incident/create', data)     return res;   } }

Here, we have a reportIncident function that takes in an empty context object and the data we’re sending from our form. This data is then attached to a post request that creates an incident and returns back to our report-incident.vue file.

At this point, you should be able to add a report using the form after which you would be redirected to /my-reports page.

An empty my reports page
My reports page empty. (Large preview)

This page should display a list of incidents created by the user but right now it only shows what we see above, let’s go ahead to fix that.

We’re going to be using the fetch method we learned about to get this list. Update your my-reports.vue file with the following:

<script> import incidentCard from "@/components/incidentCard.vue"; export default {   middleware: "auth",   name: "my-reports",   data() {     return {       incidents: []     };   },   components: {     incidentCard   },   async fetch() {     let { data } = await this.$ axios.get("/user/incidents");     this.incidents = data.data;   } }; </script>

Here, we use fetch method to get user-specific incidents and assign the response to our incidents array.

If you refresh your page after adding an incident, you should see something like this.

My reports page with one report
My Reports page with a report. (Large preview)

At this point, we would notice a difference in how fetch method and asyncData loads our data.

Conclusion

So far, we have learned about the Axios module and all of its features. We have also learned more about asyncData, and how we can fetch both of them together despite their differences. We’ve also learned how to perform authentication in our application using the auth module and how to use the auth middleware to protect our routes. Here are some useful resources that talk more about all we’ve covered.

Resources

  1. “Auth Module,” NuxtJS.org
  2. “Axios Module: Introduction,” NuxtJS.org
  3. FormData, MDN web docs
  4. “API: The asyncData Method,” NuxtJS.org
  5. “The Vue Instance: Lifecycle Diagram,” VueJS.org
  6. “Understanding How fetch Works In Nuxt 2.12,” NuxtJS.org
Smashing Editorial (ks, ra, yk, il)


Articles on Smashing Magazine — For Web Designers And Developers


Deprecated: Function create_function() is deprecated in /home2/thebrand/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 1884
02-nuxt-landing
27 Apr

Getting Started With Nuxt

by TBSCategories: News

Getting Started With Nuxt

Getting Started With Nuxt

Timi Omoyeni

Web developers build a lot of Single Page Applications using JavaScript frameworks (Angular, React, Vue). SPAs dynamically populate the contents of their pages on load which means by the time google crawls their site, the important content is yet to be injected into the site. Part of this problem can be solved by pre-rendering your application’s content. This is where server-side applications come in, and for Vuejs developers, we can build server-side applications using Nuxt.js.

We’re going to assume that you have not used it before, as such it will start from the ground-up — introducing you to Nuxt.js, its file structure and how routing works. While also touching how you can get it to work with Vuex.

At the end of this tutorial, you should be able to go on to build basic web applications in Nuxt.js, and if you have been wondering how to get started with Nuxt.js, this will do justice to that.

This article is targeted at those that are fairly familiar with Vue.js and it’s a concept, For those without knowledge of Vue.js, consider starting from the official Vuejs documentation and The Net Ninja’s Vuejs playlist.

What Is Nuxt.js?

According to their official page:

“Nuxt is a progressive framework based on Vue.js to create modern web applications. It is based on Vue.js official libraries (vue, vue-router and vuex) and powerful development tools (webpack, Babel and PostCSS). Nuxt’s goal is to make web development powerful and performant with great developer experience in mind.”

It allows you to create three types of applications, depending on the purpose it’s intended for:

  1. Static Generated pages (Pre-rendering)
    Static generated applications do not require API requests to fetch the contents of the pages, i.e. the contents are already included in the HTML file. An example of a static site is a portfolio website or a landing page for a product.

  2. Single Page Application
    Most JavaScript frameworks (React, Angular, Emberjs, Vue, etc) are single page application whose contents are dynamically populated with faster transitions. Most SPAs make use of the HTML5 history API or the location Hash for routing.

  3. Server Side Rendered Applications (SSR)
    Server-Side Rendering is a technique used to fetch and display client-side data on the server to send a fully rendered page to the client. This is a good approach to get good SEO for your application.

Creating Your First Nuxt.js Application

You can create a Nuxt.js application in two ways:

  1. Using the scaffolding tool create-nuxt-app.
  2. From scratch.

In case you just want to see the finished app that we would be building, here’s a link to the GitHub repo.

In this tutorial, we would be focused on using create-nuxt-app so let’s get started. If you have npx installed, open your terminal and run this command:

$  npx create-nuxt-app nuxt-tutorial-app

or

$  yarn create nuxt-app nuxt-tutorial-app

For the purpose of this tutorial, nuxt-tutorial-app is the name of the application but feel free to name yours differently.

This would be followed by a list of options that help in configuring your application with what you might need for development.

Here’s what my configuration looks like:

Nuxt conguration options. (Large preview)

For the purpose of this tutorial, we do not need axios, linting and Prettier configurations.

Once that is done, we’ll run the following command in our terminal:

$  cd nuxt-tutorial-app $  npm run dev

Your app should now be running on http://localhost:3000 and this is what you should see:

Nuxt scaffolding default landing page. (Large preview)

At this point, your app is ready for development.

Understanding Nuxt Folder Structure

Scaffolding the application as we did creates different files and folders which we can start working with. For someone who hasn’t work with Nuxt before, this might throw you off balance. So we’ll be looking at the folders, getting to understand their importance.

  • Assets
    This folder is for un-compiled files such as images, font files, SASS, LESS or JavaScript files. Let us add create a styles folder and a main.css file and copy and paste the following in it.
a {   text-decoration: none;   color: inherit;   cursor: pointer; } .header {   width: 100%;   max-width: 500px;   margin-left: auto;   margin-right: auto;   height: 60px;   top: 0;   position: sticky;   background-color: #fff;   display: flex;   justify-content: space-between;   align-items: center; } .logo {   width: 40%;   max-width: 200px;   height: 40px; } .logo .NuxtLogo {   max-width: 30px;   margin-left: 10px;   max-height: 40px; } .nav {   width: 60%;   height: 40px;   display: flex;   justify-content: space-between;   padding-right: 10px;   max-width: 300px; } .nav__link {   width: 80px;   display: flex;   align-items: center;   border-radius: 4px;   justify-content: center;   height: 100%;   border: 1px solid #00c58e;   cursor: pointer; } .nav__link:active {   background-color: #00c58e;   border: 1px solid #00c58e;   color: #fff;   box-shadow: 5px 3px 5px 2px #3f41468c; } .home {   padding-top: 30px; } .home__heading {   text-align: center; } .directories {   display: flex;   box-sizing: border-box;   padding: 10px;   max-width: 1000px;   margin: 0 auto;   flex-wrap: wrap;   justify-content: center; } @media (min-width: 768px) {   .directories {     justify-content: space-between;   } } .directory__container {   width: 100%;   max-width: 220px;   cursor: pointer;   border-radius: 4px;   border: 1px solid #00c58e;   display: flex;   height: 60px;   margin: 10px 5px;   margin-right: 0;   justify-content: center;   align-items: center; } .directory__name {   text-align: center; } .directory {   width: 100%;   margin: 50px auto;   max-width: 450px;   border-radius: 4px;   border: 1px solid #00c58e;   box-sizing: border-box;   padding: 10px 0; } .directory__info {   padding-left: 10px;   line-height: 22px;   padding-right: 10px; }

The styles above will be used across the application for what we’ll be building. As you can see we have styles for the navigation and other aspects which we’ll plug into the application as we progress.

  • Components
    This folder is one we’re familiar with from Vue.js, it contains your reusable components.

Now, let’s create our first component and name it navBar.vue, and add the following code to it. We want the navbar of the site to display the logo and link to the Home and About pages which we will create in future. This navbar will be visible across the application. It will also make use of some styles that we have added above.

<template>   <header class="header">     <div class="logo">       <nuxt-link to="/">         <Logo />       </nuxt-link>     </div>     <nav class="nav">       <div class="nav__link">         <nuxt-link to="/">Home</nuxt-link>       </div>       <div class="nav__link">         <nuxt-link to="/About">About</nuxt-link>       </div>     </nav>   </header> </template> <script> import Logo from "@/components/Logo"; export default {   name: "nav-bar",   components: {     Logo   } }; </script> <style> </style>

The template section contains what will be visible to the user. We have a header element which contains our logo and nav links. For us to link to the pages, we make use of nuxt-link which provides navigation between component pages.

In the script section, we import the logo component using Nuxt alias @ and declared it in our component for use by adding it as a component. This makes it possible for us to render it in the template.

  • Layout
    Here, we’ll be storing our application layouts. This is particularly useful if your application’s design calls for two or more layouts, e.g. one for authenticated users and another for guests or admins. For the purpose of this tutorial, we’ll be sticking to the default layout.

Let us open our default.vue file and add our navBar component to the layout of our application.

<template>   <div>     <Nav />     <nuxt />   </div> </template> <script> import Nav from "~/components/navBar.vue"; export default {   components: {     Nav   } }; </script>

In the template section, we’ve added our Nav component inside the layout container to always appear at the top after importing it into the file and declaring it in the script section.

The next thing after our Nav component is <nuxt />, which tells Nuxt where to render all its routes.

This Nav component is the one we created above. By adding it here, the Nav component will be used across the application.

  • Middleware
    This folder was created to house JavaScript files that are required to run before a page(s) is rendered. If you’ve ever used the Vuejs navigation guard, this folder was created for files like that.

  • Pages
    This is another folder that developers with Vuejs background would not be familiar with. It works in such a way that every *.vue file is created as a route in your application so it serves as both views and a router folder at the same time, we’ll talk more about this in the next section.

  • Plugins
    This is where you store files that you want to run before mounting the root Vue.js application. It is not a required folder so it can be deleted.

  • nuxt.config.js
    This file is used to configure your application, it is usually pre-populated based on the config when creating your app. An ideal nuxt.config.js file should look like this by default:

export default {   mode: 'universal',   /*   ** Headers of the page   */   head: {     title: process.env.npm_package_name || '',     meta: [       { charset: 'utf-8' },       { name: 'viewport', content: 'width=device-width, initial-scale=1' },       { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }     ],     link: [       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }     ]   },   /*   ** Customize the progress-bar color   */   loading: { color: '#fff' },   /*   ** Global CSS   */   css: [   ],   /*   ** Plugins to load before mounting the App   */   plugins: [   ],   /*   ** Nuxt.js dev-modules   */   buildModules: [   ],   /*   ** Nuxt.js modules   */   modules: [   ],   /*   ** Build configuration   */   build: {     /*     ** You can extend webpack config here     */     extend (config, ctx) {     }   } }

Each time a change is made to this file, your application will automatically restart to reflect the changes. Let’s go over what the properties used in the file mean.

  • Mode
    The type of application; either universal or spa. By selecting universal, you’re telling Nuxt that you want your app to be able to run on both the server-side and the client-side.
  • Head
    All the default meta tags properties and favicon link found inside the head tag in your app is found here. This is because Nuxt.js doesn’t have a default index.html file, unlike Vue.js.
  • loading
    All Nuxt applications come with a default loader component and the color can be customized here.
  • css
    You’re expected to enter the link to all your global CSS files so your application can take it into account when mounting the application. We’re going to add the link to our css file to this and restart our application. 
 /*    ** Global CSS    */   css: ["~/assets/styles/main.css"]
  • plugins
    This is where you connect all the plugins in your plugins folder to the application. It takes in an object with properties such as src that accepts the file path to the plugin and a mode that configures how your application treats such plugin; either as a server-side plugin or a client-side plugin. For example:
{ src: '~/plugins/universal-plugin.js' }, // for server and client plugins { src: '~/plugins/client-side.js', mode: 'client' }, // for client only plugins { src: '~/plugins/server-side.js', mode: 'server' }, // for server side only plugins

This is important to avoid error either on the server-side or client-side especially if your plugin requires something like localStorage that is not available on the server-side.

For more info about the nuxt.config.js file, check out the official doc.

Nuxt Pages And Routing System

The pages folder in your Nuxt application is used to configure your application’s routes, i.e. your route name is dependent on the name of each file in this folder, e.g. if you have an about.vue file inside your pages file, it means you now have an /about route in your app, but that’s not all. What happens if you want a dynamic route for your application? Or a nested route? How do you go about it? let’s find out.

Basic Routes

Basic routes can be classified as routes that do not require extra configuration for them to work. For example, a direct route /work or a /contact route. So if your pages folder looks like this:

pages/ --| me/  -----| index.vue  -----| about.vue --| work.vue --| contact.vue --| index.vue

Nuxt would automatically generate a router config that looks like this:

router: {   routes: [     {       name: 'index',       path: '/',       component: 'pages/index.vue'     },     {       name: 'work',       path: '/work',       component: 'pages/work'     },     {       name: 'contact',       path: '/contact',       component: 'pages/contact'     },     {       name: 'me',       path: '/me',       component: 'pages/me/index.vue'     },     {       name: 'me-about',       path: '/me/about',       component: 'pages/me/about.vue'     }   ] }

These paths can then be used to access the components tied to them. You can see that the path does not contain pages. And Nuxt handles the components named index.vue as it should without an additional config for that.

Nested Routes

To create a nested route, create a folder called dashboard inside the pages folder. This folder should contain all the files you want to nest in it. For example, user.vue and settings.vue. Then at the root of pages folder, create a file called dashboard.vue.

pages/  --| me/  -----| index.vue  -----| about.vue  --| dashboard/  -----| user.vue  -----| settings.vue  --| dashboard.vue  --| work.vue  --| contact.vue  --| index.vue

This would automatically generate a router with routes that look like this:

router: {   routes: [     {       name: 'index',       path: '/',       component: 'pages/index.vue'     },     {       name: 'work',       path: '/work',       component: 'pages/work'     },     {       name: 'contact',       path: '/contact',       component: 'pages/contact'     },          {       name: 'me',       path: '/me',       component: 'pages/me/index.vue'     },     {       name: 'me-about',       path: '/me/about',       component: 'pages/me/about.vue'     },     {       name: 'dashboard',       path: '/dashboard',       component: 'pages/dashboard.vue',       children: [         {           name: 'dashboard-user',           path: '/dashboard/user',           component: 'pages/dashboard/user.vue'         },         {           name: 'dashboard-settings',           path: '/dashboard/settings',           component: 'pages/dashboard/settings.vue'         }       ]     }   ] }

Notice that the route name always follows a regular pattern:

name of the folder + '-' + name of the file

With this, you can be sure that each route will have a unique name.

Dynamic Routes

Dynamic routes are routes that are defined by a variable, this variable can either be a name, number or an id gotten from client data on the app. This comes in handy when working with an API, where the id will likely be the id of the item coming from the database.

In Nuxt, dynamic routes are defined by appending an _ to a file name or folder name in the pages folder. For instance, if you want a dynamic route whose variable name is id, all you need is to name your file _id.vue and Nuxt automatically creates a dynamic route for you. For example:

pages/ --| me/ -----| index.vue -----| about.vue -----| _routeName -------| index.vue -------| info.vue --| dashboard/ -----| user.vue -----| settings.vue --| dashboard.vue --| work.vue --| _id.vue --| contact.vue --| index.vue

This would automatically create a router file with the following routes,

   {       name: 'work',       path: '/work',       component: 'pages/work'     },     {       name: 'contact',       path: '/contact',       component: 'pages/contact'     },     {       name: 'id',       path: '/:id',       component: 'pages/_id.vue'     }     {       name: 'me',       path: '/me',       component: 'pages/me/index.vue'     },     {       name: 'me-about',       path: '/me/about',       component: 'pages/me/about.vue'     },     {       name: 'me-routeName',       path: '/me/:routeName',       component: 'pages/me/_routeName/index.vue'     },     {       name: 'me-routeName-info',       path: '/me/:routeName/info',       component: 'pages/me/route.vue'     },     {       name: 'dashboard',       path: '/dashboard',       component: 'pages/dashboard.vue',       children: [         {           name: 'dashboard-user',           path: '/dashboard/user',           component: 'pages/dashboard/user.vue'         },         {           name: 'dashboard-settings',           path: '/dashboard/settings',           component: 'pages/dashboard/settings.vue'         }       ]     }   ] }

Although some of the Vue.js router tags work in Nuxt and can be used interchangeably, it is recommended that we use Nuxt router components. Here are some of the differences between the Nuxt Router tags and Vue.js Router tags.

VueJs NuxtJS
router-link nuxt-link
router-view (for nested routes) nuxt-child
router-view(default) nuxt

Difference between vue.js router and nuxt.js router

At this point, Here’s what your app should look like this, with the navigation shown at the top.

The Landing page. (Large preview)

Now that we understand how Nuxt pages and Routes work, let’s add our first page and route about.vue. This page would list some directories in the application with a link to a new page that shows more information about such directory.

Let us add the following code to it:

<template>   <section class="home">     <h1 class="home__heading">About Nuxtjs Directory Structure</h1>     <div class="directories">       <div class="directory__container" v-for="directory in directories" :key="directory.id">         <p class="directory__name">           <nuxt-link             :to="{ name: 'id', params: { id: directory.id, dir: directory } }"           >{{ directory.name }}</nuxt-link>         </p>       </div>     </div>   </section> </template> <script> export default {   name: "about-nuxt",   data() {     return {       directories: [         {           id: 0,           name: "The Assets Directory",           info:             "By default, Nuxt uses vue-loader, file-loader and url-loader webpack loaders for strong assets serving. You can also use the static directory for static assets. This folder is for un-compiled files such as images, font files, SASS, LESS or JavaScript files"         },         {           id: 1,           name: "The Components Directory",           info:             "The components directory contains your Vue.js Components. You can’t use asyncData in these components."         },         {           id: 2,           name: "The Layouts Directory",           info:             "The layouts directory includes your application layouts. Layouts are used to change the look and feel of your page (for example by including a sidebar). Layouts are a great help when you want to change the look and feel of your Nuxt.js app. Whether you want to include a sidebar or having distinct layouts for mobile and desktop"         },         {           id: 3,           name: "The Middleware Directory",           info:             "The middleware directory contains your Application Middleware. Middleware lets you define custom functions that can be run before rendering either a page or a group of pages (layouts)."         },         {           id: 4,           name: "The Pages Directory",           info:             "The pages directory contains your Application Views and Routes. The framework reads all the .vue files inside this directory and creates the application router. Every Page component is a Vue component but Nuxt.js adds special attributes and functions to make the development of your universal application as easy as possible"         },         {           id: 5,           name: "The Plugins Directory",           info:             "The plugins directory contains your Javascript plugins that you want to run before instantiating the root Vue.js Application. This is the place to register components globally and to inject functions or constants. Nuxt.js allows you to define JavaScript plugins to be run before instantiating the root Vue.js Application. This is especially helpful when using your own libraries or external modules."         },         {           id: 6,           name: "The Static Directory",           info:             "The static directory is directly mapped to the server root (/static/robots.txt is accessible under http://localhost:3000/robots.txt) and contains files that likely won’t be changed (e.g. the favicon). If you don’t want to use Webpack assets from the assets directory, you can create and use the static directory (in your project root folder)."         },         {           id: 7,           name: "The Store Directory",           info:             "The store directory contains your Vuex Store files. The Vuex Store comes with Nuxt.js out of the box but is disabled by default. Creating an index.js file in this directory enables the store. Using a store to manage the state is important for every big application. That’s why Nuxt.js implements Vuex in its core."         }       ]     };   } }; </script> <style> </style>

Starting from the script section, we created an array which we store in the directories variable. Each array contains an object with id, name, and info. This is the data we’ll show to the user when this page is opened. We want to show it to the user such that the names are clickable.

We do that in the template section, using v-for to loop through the array. This makes it possible to get each item in the array, which we can access using directory. In the loop, we use nuxt-link to handle the linking of each time. Using nuxt-link, we pass the details (id, name and info) of each directory item via nuxt router. We do this because we want to be able to display this on the show page when the user clicks on an item.

If you navigate to the /about route using your browser, you should see something like this:

About page. (Large preview)

Now, let’s create a new file and name it _id.vue. This would automatically create a dynamic route that takes the id param from the link display a little information about any directory clicked on from the About page.

Let us add this to our file:

<template>   <section class="directory">     <h1 class="directory__name">{{ directory.name }}</h1>     <p class="directory__info">{{ directory.info }}</p>   </section> </template> <script> export default {   name: "directory-info",   data() {     return {       directory: this.$ route.params.dir     };   } }; </script> <style> </style>

What we have done is to create a page that fetches data from the route param dir using the this.$ route.params. This gets us the name and info of the clicked directory, which we then display to the user.

So if you click on any directory link (e.g. store directory), you should see this.

What the ID page looks like. (Large preview)

But there’s a problem, if you refresh this page, your directory info gets lost and you get an error. This would be fixed using our Vuex Store so let’s dive into it.

Using Vuex Store In Nuxt

Vuex can be accessed in Nuxt using two modes:

  1. Classic mode (deprecated).
  2. Modules mode.

Modules mode

Nuxt automatically creates a Store folder upon the creation of your app. In Modules mode, Nuxt would treat every file inside this folder as a module but index.js is required for Vuex store to be activated in your app. So let’s create an index.js file in our store folder and set it up for use. Let us add the following to our file.

index.js

export const state = () => ({    })  export const getters = {  }  export const mutations = {    }  export const actions = {    }

All we have done is to set up the store for our file with all we might need; the state for storing data, getters for performing extra manipulation to our state, mutations for modifying our state and actions for committing mutations.

Nuxt also allows users to separate each core concept into different files which means we can have store.js, getters.js, mutation.js and action.js and this is good as it makes for easy maintainability. Now, we fix the problem of directory disappearing on refresh, we’ll use the store, but first, we need to install and set up Vuex persist for our store.

Install Vuex persist from npm using either command below, depending on your preference.

$  npm install --save vuex-persist

or

$  yarn add vuex-persist

After installing, we’re going to create a vuex-persist.js file in our plugins folder and add the following:

import VuexPersistence from 'vuex-persist'  export default ({   store }) => {   window.onNuxtReady(() => {     new VuexPersistence({       storage: window.localStorage     }).plugin(store);   }); }

Here, we import our plugin from node-modules and configure it to save your store in localStorage. This plugin allows you to choose other storage options such as sessionStorage too so feel free to explore their documentation for more info.

Remember to add it to your nuxt.config.js file.

/*    ** Plugins to load before mounting the App    */   plugins: [{     src: '~/plugins/vuex-persist',     mode: 'client'   }],

Here, we added the file path to our plugin and told Nuxt to only run this plugin on the client side of this application.

Now, we can set our store up to accept and store directory info. Update your store to handle directory info like this:

export const state = () => ({   directory: '' }) export const getters = { } export const mutations = {   saveInfo(state, payload) {     state.directory = payload.directory   } } export const actions = { }

What we’ve done is to add a directory state to our store and a mutation function saveInfo that modifies the value of the directory state we added to our store in anticipation of the data we’d be passing it soon.

Next, in your about.vue file, update it to look like this.

<template>   <section class="home">     <h1 class="home__heading">About Nuxtjs Directory Structure</h1>     <div class="directories">       <div         class="directory__container"         v-for="directory in directories"         :key="directory.id"         @click.prevent="storeDirectoryInfo(directory)"       >         <p class="directory__name">           <nuxt-link             :to="{ name: 'id', params: { id: directory.id, dir: directory } }"           >{{ directory.name }}</nuxt-link>         </p>       </div>     </div>   </section> </template> <script> export default {   name: "about-nuxt",   data() {     return {       directories: [         //remains the same       ]     };   },   methods: {     storeDirectoryInfo(dir) {       this.$ store.commit("saveInfo", {         directory: dir       });     }   } }; </script> <style> </style>

Now, we’ve added a click event to every directory container that passes the directory info as an argument to the storeDirectoryInfo. In this function, we commit the directory object to our store.

Finally, we would go back to our _id.vue file and replace the directory variable with our data from the store like this:

<template>   <section class="directory" v-if="directory">     <h1 class="directory__name">{{ directory.name }}</h1>     <p class="directory__info">{{ directory.info }}</p>   </section> </template> <script> import { mapState } from "vuex"; export default {   name: "directory-info",   computed: {     ...mapState(["directory"])   } }; </script> <style></style>

Here, we refactor our code to use directory object directly from our store by first importing mapState from Vuex.

import { mapState } from 'vuex';

Instead of first checking if this.$ route.params.dir is undefined before accessing the data from our store, we decide to use our store by reading the data that’s in the store.

<script> import { mapState } from "vuex"; export default {   name: "directory-info",   computed: {     ...mapState(["directory"])   } }; </script>

Then we update our template to make sure it doesn’t render while directory is undefined.

<template>   <section class="directory" v-if="directory">     <h1 class="directory__name">{{ directory.name }}</h1>     <p class="directory__info">{{ directory.info }}</p>   </section> </template>

On doing this, no matter how many times we refresh our app, our directory object is safe in our store and can be easily accessed using the …mapState(['stateVariable']) method.

Deploying To Heroku

Now that our nuxt-tutorial-app app is complete, what’s next? Deploying our shiny new app to production.

We’ll be deploying our Nuxt.js app to Heroku using Github for easy deployment so if you’ve not set up a repository for your app, now would be a time to do so. The next thing would be to open Heroku and create a new app, choose a name and connect it to GitHub and the repo created above. Next, go to your settings, you should see something like this.

Heroku App settings page. (Large preview)

Now, add the following config variables.

NPM_CONFIG_PRODUCTION=false HOST=0.0.0.0 NODE_ENV=production

The next thing we have to do is to create a Procfile in the root folder of our app (same level as nuxt.config.js) and enter this command:

web: nuxt start

This will run the nuxt start command and tell Heroku to direct external HTTP traffic to it.

After adding the Procfile to your app, commit and push your changes to your repo. If you have automatic deploys enabled for your app, your app should be live and accessible from its URL. If you can see your app live, congratulations! 🎆 you have successfully built and deployed your first Nuxt.js application.

Conclusion

Now that we know how to create a basic Nuxt application and deploy to Heroku, what’s next? Here are some resources that cover things like using Axios in Nuxt and implementing authentication in your app.

  1. Using the axios module.
  2. Implementing Authentication in Nuxt.
  3. Nuxt.js official documentation.
  4. nuxt-tutorial-app Github repo.
Smashing Editorial (ks, ra, yk, il)


Articles on Smashing Magazine — For Web Designers And Developers

×

Powered by WhatsApp Chat

WhatsApp Chat is free, download and try it now here!

× Chat with Us