How to build Universal Apps with Nuxt.js?

How to build Universal Apps with Nuxt.js?

Nuxt.js is a higher level framework on top of Vue.js that allows you to easily create Universal apps. In this Nuxt.js tutorial, you'll learn how to build Universal Apps with Nuxt.js

When developing any SPA application you like the fact that you get apps that are fast and snappy. There are other problems though. Your app might take longer to load than usual and your search engine is struggling to crawl your app and your SEO suffers for it.

The solution to this for Vue.js is called Nuxt.js. Nuxt.js is a higher level framework on top of Vue.js that allows you to easily create Universal apps. Universal apps that are pre-rendered on the server and thereby have a much smaller bundle and has static files the search engine can crawl without a problem.

Let’s explore how you build apps with Nuxt.js and what properties and methods you have at your disposal to make this an enjoyable experience.

Additionally Nuxt.js allows you to share code between server and client, sounds exciting right?

Speaker: Chris Noring (Microsoft)

A Thorough Introduction to NuxtJS

A Thorough Introduction to NuxtJS

NuxtJS is a framework built on top of VueJS. The biggest benefits you get out of the box are server-side rendering and automatic code splitting. You also get...

NuxtJS is a framework built on top of VueJS.

The biggest benefits you get out of the box are server-side rendering and automatic code splitting. You also get many common Vue libraries built in, pulled together with a conventional folder structure in order to reduce boilerplate.

This video only scratches the surface of what Nuxt can do, but it does cover most of the major features and goes farther than the other free tutorials I've found.

0:00 Start
2:57 Why Nuxt?
7:02 Installation
11:33 Project Structure
17:26 Pages and Routing
29:58 Navbar and Layouts
39:40 axios and asyncData
49:00 Meta tags
56:09 VueX and fetch
1:05:25 Review

Github Links:

Init: https://github.com/jeffreybiles/vue-screencasts-nuxt/commit/b13e5407d3cc3668ffb086cbb2977b93d7cf4db9

Serve on port 8000: https://github.com/jeffreybiles/vue-screencasts-nuxt/commit/a637a4bc727ea1bf59c5ac257b4bcabef7bd9483

Pages and Routes: https://github.com/jeffreybiles/vue-screencasts-nuxt/commit/cd4cc70f3df5df8ded3c35042a16e6e3cca9eb89

Links: https://github.com/jeffreybiles/vue-screencasts-nuxt/commit/c847095a49bae8302116151fff8fed76106f4960

Navbar + Layouts: https://github.com/jeffreybiles/vue-screencasts-nuxt/commit/b9885985f673d5cc7742cd2c0fd97e8890bfb5d6

Axios and asyncData: https://github.com/jeffreybiles/vue-screencasts-nuxt/commit/a5f810971027063c419c510a94bbdbee81ad85f0

Head tags and titles: https://github.com/jeffreybiles/vue-screencasts-nuxt/commit/928494c23c65afd3eaf79c4541d5ce75e7021f84

VueX: https://github.com/jeffreybiles/vue-screencasts-nuxt/commit/48d52ce5b69af13ad077f73a7efaa54a39b5f7c2

Backend: https://github.com/jeffreybiles/vue-screencasts-server/tree/47c546286742b42419d628264723eb006372329b

How to setup a Sitemaps with the NuxtJs

How to setup a Sitemaps  with the NuxtJs

Hey to everyone reading this! In this article, I’d like to investigate the different options of creating sitemaps in Nuxt using the sitemap module.

Hey to everyone reading this! In this article, I’d like to investigate the different options of creating sitemaps in Nuxt using the sitemap module.

If you want to create a sitemap of all your routes and pages and add dynamic routes, request your back-end API, or even if you want to create multiple sitemaps with a sitemap index file, this module will provide you with everything you want.

Contents
  • Sitemap module options.
  • Simple single sitemap with routes.
  • Sitemap with requesting from API.
  • Sitemap for several indexes.
  • Sitemap for multi-lang websites.
Module Options

Here are all the options available:

nuxt-community/sitemap-module

  • route(array | function)
    You can manually add routes there to definitely put in the sitemap or use that property to request the routes from an API, so it can be dynamically generated from your DB.
import axios from 'axios';
//...
{
  routes: [
    'catalog/best-offers',
    'catalog/chairs'
  ],
  // or
  routes: () => {
    return axios.get(`my.own.api.com/getSitemapRoutes`);
  }
}

nuxt.config.js

Static routes property and function to get routes

  • path (string)
    This is a path to the sitemap. The default is /sitemap.xml for normal and /sitemapindex.xml if you use the sitemaps property.
  • hostname (string)
    If you define the hostname, it will be overridden for all the routes, regardless of the application domain. Module logic is that if the hostname is not defined, the application checks if the current request is HTTPS or not, and gets the current application domain. Then, the module builds a hostname based on that. If you use nuxt-i18n and your app has several domains, the module should clearly define the current application based on the requesting domain.
  • cacheTime (number)
    This is the caching TTL of the sitemap routes that you defined before.
  • exclude (string[])
    Here, you can either exclude some static routes for your Nuxt application:
// ...
{
  exlude: [
    'catalog/',
    'blog-*/',
    '*.html',
  ]
}

nuxt.config.js

Exclude with wildcard

Or, specifically for the sitemap index, when you don’t want to duplicate static routes for each sitemap, you can do this:

// **
{
  sitemaps: [
    {
      path: 'sitemap-normal.xml',
      exclude: [
        '/cabinet',
        '/cabinet/*',
        '/cabinet/recruiter/*',
        '/account-removed',
        '/search-by-cv',
      ],
    },
    {
      path: 'sitemap-popular.xml',
      routes: getPopularSitemap,
      exclude: ['/**'],
    },
    {
      path: 'sitemap-some-other.xml',
      routes: getSitemapSomeOtherLinks,
      exclude: ['/**'],
    },
  ]
}

nuxt.config.js

Exclude static routes

Simple Single Sitemap With Routes

So, usually if you have your own portfolio website or something like that, you want to generate a sitemap only with your static routes. Imagine that you have this structure for your website:

Pages:

  • Blog
  • Projects
  • Posts
  • Etc.
  • Index.vue

And in the end, you just want to put it in the sitemap. You might end up with something like this:

sitemap: {
    path: '/sitemap.xml',
    cacheTime: 1000 * 60 * 60 * 2,
    trailingSlash: true,
    gzip: true
},

nuxt.config.js

Simple sitemap configuration

Sitemap With Dynamic Routes

What do I mean by dynamic routes? Here is a route like /blog/_post.vue, when you have a page of an element or something else.

In that case, the module cannot generate those IDs on its own, of course, and that’s when the routes property comes in handy:

import axios from 'axios';
//...
sitemap: {
    path: '/sitemap.xml',
    cacheTime: 1000 * 60 * 60 * 2,
    trailingSlash: true,
    gzip: true,
    routes: () => {
      return axios.get(`my.own.api.com/getSitemapRoutes`);
    }
},
//or
import getRoutes from '../util.js'
//...
{
  routes: getRoutes
}

nuxt.config.js

Sitemap with dynamic routes

Several Indexes

Now, having some static routes and dynamic routes, maybe it makes sense to have separate sitemaps for those.

It becomes even more convenient when you have a lot of dynamic URLs and you want to separate them in different sitemaps. Here is my implementation of that:

import axios from 'axios';
//...
const getSitemapBlogsFn = sitemapIndex => () =>
    axios.get(`http://my.own.api/sitemap_routes?index=${sitemapIndex}`)
        .then(response => response && response.data)
        .then(offers =>
            offers.map(({ code }) => ({
                url: `http://myblog.org/blog/${code}`,
                changefreq: 'daily',
                priority: 1,
            })),
        );

const getSitemapsConfigurations = () =>
    range(30).map(index => ({
        path: `sitemap-${index}.xml`,
        routes: getSitemapBlogsFn(index),
        cacheTime: 1000 * 60 * 60 * 2,
        trailingSlash: true,
        exclude: ['/**'], //here we exclude all static routes
    }));
//...
{
sitemap: {
      path: '/sitemap.xml',
      sitemaps: 
      [
          {
              path: 'sitemap-routes.xml',
              cacheTime: 1000 * 60 * 60 * 2,
              trailingSlash: true,
          },
          ...getSitemapsConfigurations(),
      ],
    },
}

nuxt.config.js

Implementation of a function to create multiple sitemaps

Under the hood in the back end, based on the index parameter, you need to change the OFFSET requesting elements.

Sitemap for a Multi-Language Website

Here, the only detail to worry about is not to set the hostname so the domain will be taken from the request that will come to the Nuxt server.

Also, in case your domain hosting is via CNAME or Load balancer, then the request that will come to Nuxt will not be HTTPS, but simple HTTP.

In that case, you need to make sure that your x-forwarded-proto is set to HTTP in a request. Then, the module will recognize that the original request was HTTP and it will put an HTTPS link to the sitemap.

On clusterjobs.de we have that option, when we need to have a multi-index sitemap that is dynamic and responds to each language domain. And, in the end, that module comes quite handy. I started using it a year ago, only with the routes and static routes options and it grew a lot.

Hopefully, it was useful and it improves your Nuxt application or encourages you to use this incredible framework!

JavaScript Tutorial: if-else Statement in JavaScript

JavaScript Tutorial: if-else Statement in JavaScript

This JavaScript tutorial is a step by step guide on JavaScript If Else Statements. Learn how to use If Else in javascript and also JavaScript If Else Statements. if-else Statement in JavaScript. JavaScript's conditional statements: if; if-else; nested-if; if-else-if. These statements allow you to control the flow of your program's execution based upon conditions known only during run time.

Decision Making in programming is similar to decision making in real life. In programming also we face some situations where we want a certain block of code to be executed when some condition is fulfilled.
A programming language uses control statements to control the flow of execution of the program based on certain conditions. These are used to cause the flow of execution to advance and branch based on changes to the state of a program.

JavaScript’s conditional statements:

  • if
  • if-else
  • nested-if
  • if-else-if

These statements allow you to control the flow of your program’s execution based upon conditions known only during run time.

  • if: if statement is the most simple decision making statement. It is used to decide whether a certain statement or block of statements will be executed or not i.e if a certain condition is true then a block of statement is executed otherwise not.
    Syntax:
if(condition) 
{
   // Statements to execute if
   // condition is true
}

Here, condition after evaluation will be either true or false. if statement accepts boolean values – if the value is true then it will execute the block of statements under it.
If we do not provide the curly braces ‘{‘ and ‘}’ after if( condition ) then by default if statement will consider the immediate one statement to be inside its block. For example,

if(condition)
   statement1;
   statement2;

// Here if the condition is true, if block 
// will consider only statement1 to be inside 
// its block.

Flow chart:

Example:

<script type = "text/javaScript"> 

// JavaScript program to illustrate If statement 

var i = 10; 

if (i > 15) 
document.write("10 is less than 15"); 

// This statement will be executed 
// as if considers one statement by default 
document.write("I am Not in if"); 

< /script> 

Output:

I am Not in if
  • if-else: The if statement alone tells us that if a condition is true it will execute a block of statements and if the condition is false it won’t. But what if we want to do something else if the condition is false. Here comes the else statement. We can use the else statement with if statement to execute a block of code when the condition is false.
    Syntax:
if (condition)
{
    // Executes this block if
    // condition is true
}
else
{
    // Executes this block if
    // condition is false
}


Example:

<script type = "text/javaScript"> 

// JavaScript program to illustrate If-else statement 

var i = 10; 

if (i < 15) 
document.write("10 is less than 15"); 
else
document.write("I am Not in if"); 

< /script> 

Output:

i is smaller than 15
  • nested-if A nested if is an if statement that is the target of another if or else. Nested if statements means an if statement inside an if statement. Yes, JavaScript allows us to nest if statements within if statements. i.e, we can place an if statement inside another if statement.
    Syntax:
if (condition1) 
{
   // Executes when condition1 is true
   if (condition2) 
   {
      // Executes when condition2 is true
   }
}

Example:

<script type = "text/javaScript"> 

// JavaScript program to illustrate nested-if statement 

var i = 10; 

if (i == 10) { 

// First if statement 
if (i < 15) 
	document.write("i is smaller than 15"); 

// Nested - if statement 
// Will only be executed if statement above 
// it is true 
if (i < 12) 
	document.write("i is smaller than 12 too"); 
else
	document.write("i is greater than 15"); 
} 
< /script> 

Output:

i is smaller than 15
i is smaller than 12 too
  • if-else-if ladder Here, a user can decide among multiple options.The if statements are executed from the top down. As soon as one of the conditions controlling the if is true, the statement associated with that if is executed, and the rest of the ladder is bypassed. If none of the conditions is true, then the final else statement will be executed.
if (condition)
    statement;
else if (condition)
    statement;
.
.
else
    statement;


Example:

<script type = "text/javaScript"> 
// JavaScript program to illustrate nested-if statement 

var i = 20; 

if (i == 10) 
document.wrte("i is 10"); 
else if (i == 15) 
document.wrte("i is 15"); 
else if (i == 20) 
document.wrte("i is 20"); 
else
document.wrte("i is not present"); 
< /script> 

Output:

i is 20