Build Simple Soundcloud with Vue and Nuxtjs

Build Simple Soundcloud with Vue and Nuxtjs

This is a simple SoundCloud client that built with Vue.js and Nuxt.js

Vue SoundCloud

This is a simple SoundCloud client that built with Vue.js and Nuxt.js.

Screenshots:

Desktop view:

Responsive view:

Features:
  • Server-side rendering with Nuxt.js.
  • Load data from SoundCloud API.
  • The home page included loading more tracks with infinite scroll and search tracks form.
  • The track page included related tracks ,track comments and showing track wave.
  • The profile page included the user tracks and user followers.
  • And so on...
This project implemented by the following technologies: Let's run:

Clone the project:

$ git clone https://github.com/soroushchehresa/vue-soundcloud.git vue-soundcloud

Starting Development:

Run one of the following commands:

$ yarn && yarn dev

# OR

$ npm i && npm run dev

Build and run production:

Run one of the following commands:

$ yarn && yarn build && yarn start

# OR

$ npm i && npm run build && npm start
NOTE:

It seems that SoundCloud has revoked my api client keys without any explanation or warning. Running the app locally no longer works unless you have a working SoundCloud API client id (SoundCloud has disabled registration of new apps for quite some time now).


Demo

Download

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

What’s new in HTML6

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

How to build enterprise Vue.js applications with Nuxt?

How to build enterprise Vue.js applications with Nuxt?

Learn How to build enterprise Vue.js applications with Nuxt: 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 goal is to make web development powerful and performant with a great developer experience in mind.

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 goal is to make web development powerful and performant with a great developer experience in mind.

  1. Based on Vue-router and Vuex, it also uses Webpack, Babel and PostCSS.

  2. Goal, make web development powerful and performant.

Ok, so a sales pitch, what else?

The WHAT and WHY

Ok, so we love using Vue.js, it works great to use a router, a store, adding UI and so on, so why should we consider Nuxt?

The answer is SSR, Server side rendering

Why is that such a big deal? Well, search engines, they were made to crawl static pages and most SPA frameworks don't produce static pages but dynamic pages. This causes a problem if you want your app's SEO, to be any good, i.e end up high up on a Google search result. If you have a productivity app you might not care about that so much but if you have an e-commerce store you might be out of business if you haven't got this aspect covered.

Is that all Nuxt offer?

There is more. Nuxt makes it easy to bring in things such as code-splitting. Code splitting is an important aspect of the user experience. It allows us to only load as much of our app initially that's needed. It works like this, imagine the user visits your site. You only load a tiny portion of the app so the user perceives you got a fast-loading app - everyone's happy. As the user discovers more and more of your app they start navigating to other parts of it.

At this point, we load in the code needed for that new part the user is navigating to. This approach does a lot for the user experience, especially in places where the network connection is not that good. Having this for free in Nuxt is a big deal.

There is more to Nuxt of course, like hot module replacement, being able to load async data before SSR, a great approach to working with Sass, Less and so on.

Features

Here's a full list of all features Nuxt is offering:

  • Write Vue Files (*.vue)
  • Automatic Code Splitting
  • Server-Side Rendering
  • Powerful Routing System with Asynchronous Data
  • Static File Serving
  • ES2015+ Transpilation
  • Bundling and minifying of your JS & CSS
  • Managing <head> element (<title>, <meta>, etc.)
  • Hot module replacement in Development
  • Pre-processor: Sass, Less, Stylus, etc.
  • HTTP/2 push headers ready
  • Extending with Modular architecture

That's quite the list right?

SSR and code splitting is what really sells it for me though. How about we try to learn it next?

Schema, lifecycle

Let's try to get ourselves a mile-high view of Nuxt. There are some steps from the incoming request to a rendered page.

In Nuxt we use a directive called <nuxt-link> to navigate between pages.

  1. nuxtServerInit, a store is part of your next app. This is an action we can define in the store if we want. It can be used to place data in the store the first thing we do, like a logged-in user. Read more here
  2. middleware, middleware are custom functions that can run before the rendering of a route. You could, for example, ensure that the user is properly authenticated before being able to see a specific route. Read more here
  3. validate, in this step, we validate that we are dealing with a valid request, for example, we could be validating that an incoming request has the correct route parameters
  4. asyncData() & fetch(), here we have the chance of fetching data asynchronously that will be part of the SSR rendering, for example, we could be fetching translations or some other data we need to render our page
  5. Render, here we render the page

SPA or SSR mode

If for any reason, you prefer not to use server-side rendering or need static hosting for your applications, you can simply use SPA mode using nuxt --spa.

In combination with the generate feature, it gives you a powerful SPA deployment mechanism without the need to use a Node.js runtime or any special server handling.

read more about available commands here:

https://nuxtjs.org/guide/commands

SSR, Static site generation

The big innovation of Nuxt.js comes with the nuxt generate command.

When building your application, it will generate the HTML for every one of your routes and store it in a file.

How does that work?

-| pages/
----| about.vue
----| index.vue

turns into

-| dist/
----| about/
------| index.html
----| index.html

Great for crawlers :)

Hosting

Of course, you need to host your app somewhere. Currently, Netlify offers a great and easy way to do so with a simple command:

https://vueschool.io/lessons/how-to-deploy-nuxtjs-to-netlify?friend=nuxt

Creating an App

There are two ways to create apps in Nuxt:

  1. Wizard, Using create-nuxt-app, this will trigger a wizard where you are asked to add/opt in to different things
  2. Manually, A simple NPM install of nuxt and you need to define most things yourself.

Create an app with create-nuxt-app

We can use the command create-nuxt-app to get a full-fledged project. The only thing we need to do is choose among different options.

Let's run the following command:

npx create-nuxt-app <project-name>

or yarn:

yarn create nuxt-app <project-name>

This triggers a dialog, first choose Server-side framework:

-1- server-side framework

This is what will help us to do things like server side rendering that we use for static site generation.

  • None (Nuxt default server)
  • Express
  • Koa
  • Hapi
  • Feathers
  • Micro
  • Fastify
  • Adonis (WIP)

-2- select UI library

Of course you want your app to look good. Below are all the most known UI libraries that will be included in your project.

Then select UI library:

  • None (feel free to add one later)
  • Bootstrap
  • Vuetify
  • Bulma
  • Tailwind
  • Element UI
  • Ant Design Vue
  • Buefy
  • iView
  • Tachyons

-3- choose Testing framework

Do you want testing? No? Well, you need it. Jest and AVA are both good options.

  • None (feel free to add one later)
  • Jest
  • AVA

-4- select mode

This is where we select to have our app server side rendered or not. I'd go with Universal myself.

Select Universal or SPA mode

-5- http

fetch works of course but it's kind of nice when you can use a battle tested library like axios.

Add axios module for HTTP requests

-6- linting

You do lint right? We want our code to look consistent.

Add ESLint

-7- prettier

Add Prettier

-8- launch app

Launch app

cd <project-name>
npm run dev

the app should now be running on http://localhost:3000.

That was simple right? You opted into some tried and testing libraries that are sure to make your app better.

Below is your project overview, the result of running the creation tool.

Get started, from scratch

Let's have a look at the second approach, creating our app from scratch. First, we create a directory for our app to live in:

mkdir <project-name>
cd <project-name>

Update package.json

Next, let's add the necessary command to package.json so we can start up our app from the terminal:

{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt"
  }
}

Now we can type npm run dev, to start the app.

Install nuxt

Next, let's install the nuxt library itself and save a reference to it in package.json:

npm install --save nuxt

Pages directory

Nuxt has some great conventions, so creating directories with certain names has meaning. That is the case with the directory pages. Everything, with file ending .vue, that is placed under the pages directory, will turn into a route.

<!-- index.vue -->
<template>
  <h1>Hello world!</h1>
</template>

Now run

npm run dev

This will start up our app. Let's go to the browser at http://localhost:3000 and have a look.

We have an app :)

Now try changing the template in index.vue, note how the change is reflected in the browser. This is because Nuxt comes with hot module reloading, it responds to changes.

Demo - SSR

Let's demonstrate the server-side rendering and how that works. As we mentioned before placing files under specific directories have meaning. We will continue to work with our pages directory.

This time, let's do the following:

  • Create a file products.vue under pages
  • Generate static site

Create a file

Let's create products.vue, under pages directory, with the following content:

<!-- products.vue -->
<template>
  <h1>Products</h1>
</template>

Our directory pages should now look like this:

-| pages/
---| index.vue
---| products.vue

Generate static site

Next up, let's generate those static files to make search engines everywhere happy.

We do this with the help of nuxt generate. Let's add that command to package.json and its scripts section like so:

"generate": "nuxt generate"

Next we run npm run generate, and we get a dist directory created, looking like so:

We can now easily host the content under dist using a tool, like for example http-server.

It looks like this in the browser:

As you can see http://localhost:5000/products/ and http://localhost:5000/products/index.html lead to the same place.

Working with Assets

Additionally to the pages directory, there's another directory that has special meaning. It's called assets. In there you can put images as well as stylesheets.

Working with image assets

Let's give it a try by doing the following

  • Creating assets directory and place a sample image file in there
  • Refer to sample image file in a Component

Create assets

We create our assets directory and place a file budapest.jpeg in there. Now your directory should look like the following:

-| assets/
---| budapest.jpeg
-| pages
--- | products.vue

Refer to asset

This time we want render our image asset. For this we will update products.vue to:

<!-- products.vue -->
<template>
  <div>
    <h1>Products</h1>
    <img src="~/assets/budapest.jpeg" alt="image" />
  </div>
</template>

What if we want to set this from code though? Then we extend the component to look like this:

<!-- products.vue -->
<template>
  <div>
    <h1>Products</h1>
    <img :src="img" alt="should work" />
  </div>
</template>
<script>
const url = require('~/assets/budapest.jpeg')

export default {
  data() {
    return {
      img: url
    }
  }
}
</script>

as you can see we need to import the resource to ensure we get the correct URL to our resource, like so:

const url = require('~/assets/budapest.jpeg')

Working with Style assets

You can use different approaches to styling in Nuxt like Sass, Scss, Less and CSS. For this example let's use scss.

To compile scss, we need some additional libraries. You need to run the following installation command in the terminal:

npm install node-sass sass-loader --save

This will give us the needed libraries so Nuxt can do the rest.

There are two ways we could be using scss now:

  1. Define styling in the component directly
  2. Create an external file and place in the assets directory

Define scss in the component

Let's start with defining the styles in the component directly, like so:

<!-- sample.vue -->
<template>
  <div class="images">
    add some nice images here
  </div>
</template>
<style lang="scss">
  .images {
    margin: 15px;
    padding: 20px;
    display: flex;
    justify-content: center;
    box-shadow: 0 0 10px grey;
  }
</style>

Nuxt will compile the above and apply it to any matching CSS classes.

Define an external file

The other way we can work with styling assets is by creating separate files.

Let's create the file page.scss under assets/scss with the following content:

.page {
  .title {
    font-size: 20px;
  }
}

NOTE, we can create the styling file directly under assets directory but I just like to separate concerns so I recommend a directory approach like so:

-| assets/
---| images/
---| scss/

We also need to point this out to Webpack so it finds it, so go and create a file called nuxt.config.js in the root and give it the following content:

module.exports = {
  css: [
    '@/assets/scss/page.scss'
  ]
}

Now our directory structure for the whole project should look something like so:

-| assets/
---| scss/
---| images/
-| pages/
-| nuxt.config.js
-| package.json

NOTE, nuxt.config.js is a configuration file that Nuxt will read from if it exists. There are a lot more you can do with nuxt.config.js and we have reason to come back to it.

Working with routing

ok, we understand how we can create different pages by simply creating them in the pages directory. How to move between pages though?

Simple, use <nuxt-link>

We get a lot of routing set up for free. So given the following file structure:

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue

we would get routing set up like so:

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}

Dynamic routing

We should understand by now how our file structure affects the routing. There are more aspects of routing we need to understand though namely dynamic routing.

Consider the following file structure:

pages/
--| _slug/
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue
--| index.vue

We see the usage of underscore, _ in both the directory _slug and the Vue file _id.vue. This is how we create routes with parameters.

Let's look at the resulting routes:

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'users-id',
      path: '/users/:id?',
      component: 'pages/users/_id.vue'
    },
    {
      name: 'slug',
      path: '/:slug',
      component: 'pages/_slug/index.vue'
    },
    {
      name: 'slug-comments',
      path: '/:slug/comments',
      component: 'pages/_slug/comments.vue'
    }
  ]
}

our file structure:

--| users/
-----| _id.vue

resulted in a route looking like this /users/:id?.

NOTE, the ? means that's it's optional if you want to make it mandatory you need the file structure to look like this:

--| users/
-----| _id/
---------| index.vue

Also

--| _slug/

resulted in /:slug

Validate route params

Now that we know how to deal with parameters in the routes, how do we validate those parameters?

We can add a validate() method for that. If it fails the check it will automatically route you to the 404 page.

export default {
  validate ({ params }) {
    // Must be a number
    return /^\d+$/.test(params.id)
  }
}

Nested routes

Sometimes you might have routes within your routes. You might have a /products route that in itself might render different pages depending on how the full route looks.

Let's say if we go to /products, it should load a product list but if it goes to /products/1, it should load a product detail. If we have this scenario it means we will have the following behavior:

  • a shell, this page can contain static and dynamic data and will need to contain a <nuxt-child/> component tag
  • a specific file structure

Let's have a look at the file structure:

pages/
--| products/
-----| _id.vue
-----| index.vue
--| products.vue

The above will treat products.vue as the shell page and it will generate the following routes:

router: {
  routes: [
    {
      path: '/products',
      component: 'pages/products.vue',
      children: [
        {
          path: '',
          component: 'pages/products/index.vue',
          name: 'products'
        },
        {
          path: ':id',
          component: 'pages/products/_id.vue',
          name: 'products-id'
        }
      ]
    }
  ]
}

To learn more about routing, check here:

https://nuxtjs.org/guide/routing

Working with async

When a request comes to a specific route we can bring in data asynchronously and use that to render the page. For that, we can use asyncData and fetch our data. Below we have a Vue component where asyncData are asking for data. It will block rendering until the data is fetched. We end by returning the data. The data we return ends up being amended to the data property of the component. As w can see in our <template> we are referring to article that was part of the data we returned from asyncData.

<template>
  <div v-if="article">
    <h3>
    {{article.title}}
    </h3>
    <div>
      {{article.description}}
    </div>
  </div>
  <div v-else>
    <h3>Sorry</h3>
    No article with that name 
    <strong>{{slug}}</strong>
  </div>
</template>
<script>
function getData(slug) {
  const content = {
    docker: {
      title: 'Docker 101',
      description: 'this is about Docker'
    },
    dotnet: {
      title: '.NET news',
      description: 'this is about .NET'
    }
  };
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(content[slug]);
    }, 5000)
  })
}
export default {
  async asyncData ({ params }) {
    console.log('slug', params.slug);
    const res = await getData(params.slug)
    // called every time before loading the component
    return {
      article: res,
      slug: params.slug
    }
  }
}
</script>

Layout

For the layout we want to cover three cases:

  • default page, this is the page that constitutes the default rendering of a page unless you explicitly override it.
  • error page, we can specify a page that will take care of all erroneous responses.
  • custom layout, we will cover how to define a custom layout component and show how to use our custom layout

First off, let's create the directory layouts, like so:

---| layouts
---| pages

Default page

To create a default layout, simply create a component default.vue, like so:

---| layouts
-------| default.vue

Next, give it the following content:

<template>
  <div>
    <div class="header">Hello route demo</div>
    <div class="subheader">
      <div class="item">
        <nuxt-link to="/">Home page</nuxt-link>
      </div>
      <div class="item">
        <nuxt-link to="/products">Products</nuxt-link>
      </div>
    </div>
    <nuxt/>
  </div>
</template>
<style scoped>
</style>

In our template we create a header section with CSS class subheader, in it we have a number of <div> elements, each with a <nuxt-link> element, that's our navigational link.

We also render the <nuxt/> element, now this is important. This is the element that renders our page content, if you forget this page then it won't work properly.

Error page

We can create an error page that will allow us to capture all errors. Let's create the component error.vue, like so:

---| layouts
-------| error.vue

Give it the following content:

<template>
  <div class="container">
    <h1 v-if="error.statusCode === 404">Page not found</h1>
    <h1 v-else>An error occurred</h1>
    <nuxt-link to="/">Home page</nuxt-link>
  </div>
</template>
<script>
export default {
  props: ['error']
  // ,layout: 'blog' // you can set a custom layout for the error page
}
</script>

Note, how we have a input property error, like so props: ['error']. Additionally notehoow we can filter on status code and can render different messages depending on what the error is:

<h1 v-if="error.statusCode === 404">Page not found</h1>

Custom layout

Lastly, let's show how to create and apply a custom layout. You can name your custom layout component anything you want. We elect to name our component blog.vue, like so:

---| layouts
-------| blog.vue

Next let's give it some content, like so:

<template>
  <div class="blog">
    <h1>Here's the template for an article</h1>
    <nuxt class="page" />
  </div>
</template>

This looks just like default.vue in that we have a <nuxt> element somewhere to make sure we render the page content.

How do we use it?

Good question. Let's take a page component and set the layout property, like so:

<template>
  <div>
    <h3>Docker 101</h3>
    <div>
      {{content}}
    </div>
  </div>
</template>
<script>
export default {
  layout: 'blog',
  data() {
    return {
      content: 'something...'
    }
  }
}
</script>

Note, how we point out the layout: 'blog', thereby we refer to our layout by its name, minus the file extension.

Summary

That was quite a lot in one article. Guess what though, there's a lot more to learn.

Let's recap on our learnings, we learned:

  • The WHAT and WHY of Nuxt, it's important to understand the reason for wanting to use something. In the case of Nuxt, we learned that it had an opinionated architecture relying on convention. We also learned that it used a lot of great standard libraries for state management and server-side rendering.
  • Static site generation, we learned how we can address the SEO problem that most SPA apps suffer from.
  • How to create our Nuxt app in two ways, with a wizard and manually
  • Assets, we learned how to deal with assets, images as well as styles
  • Routing, then we covered routing, by convention based on our directory structures but also how to deal with dynamic routing
  • Async, then we learned how to use a method like asyncData() to read asynchronous data before rendering a page.
  • Layout, we learned how to create different layouts like default, error and a custom layout.

That was a lot but hopefully, you are now so comfortable with Nuxt that you see its value and can find out the rest you need in the docs.

Build a Server-Side Rendered Vue App with Nuxt.js

Build a Server-Side Rendered Vue App with Nuxt.js

In this tutorial, I will be showing how to build a static website with Nuxt.js. For the purpose of demonstration, we’ll be building a personal portfolio website.

In this tutorial, I will be showing how to build a static website with Nuxt.js. For the purpose of demonstration, we’ll be building a personal portfolio website.

Usage of static websites are increasing in popularity recently. It’s not a surprise as static site generators seem to have been gaining more popular recently too. There are various static site generators which you can use to build websites. Some of these generators include Jekyll, Hugo, Gatsby, Nuxt.js to mention but a few. Gatsby and Nuxt.js are pretty new to the collection.

Table of Contents

  • What is a Static Site
  • Why Static Site
  • What is Nuxt.js
  • How it Works
  • Create a Nuxt.js Project
  • Creating Master Layout
  • Creating Navbar Component
  • Creating The Homepage
  • Creating The About Page
  • Creating The Projects Page
  • Creating The Contact Page
  • Generating Static Site
  • Deploying Our Static Site]
  • Conclusion
What is a Static Site

A static site is the simplest kind of website you can build. Static sites are written in HTML, CSS and sometimes little JavaScript. A static site contains little or no user interactions. They are stored in the filesystem of a server and are delivered to the user exactly as stored. The same information is displayed for all users. Static sites are suitable for the contents that never or rarely need to be updated, though modern static site generators are changing this.

Why Static Site

You might ask yourself why static site? Well, there are lot of benefits with using static site. These benefits includes and are not limited to the following:

Speed: This is the most obvious benefit of a static site as it is just HTML, CSS and JS files and some assets. There is no back and forth between the client and a server, hence it speed. Static sites can be served from a CDN.

Less Resources: Static sites uses less resources as things like servers and databases are not necessarily needed.

Security: You don’t have to worry of your servers been hacked or database vulnerabilities.

In addition to the above, there are various platforms that can help you with hosting your static site. These platforms includes: GitHub Pages, Netlify, Surge etc.

What is Nuxt.js

Nuxt.js is a framework for creating server-rendered Vue.js Applications. It was inspired by Next.js. Its main scope is UI rendering while abstracting away the client/server distribution. Nuxt.js comes with a lot of features to help you in your development between the client side and the server side such as asynchronous data, middleware, layouts, etc.

In addition to building server rendered applications, Nuxt.js can also be used to build static generated Vue.js applications (which will be our focus in this tutorial).

How it Works

In addition to using Vue.js, Nuxt.js uses the following libraries to create a rich web application development:

  • What is a Static Site
  • Why Static Site
  • What is Nuxt.js
  • How it Works
  • Create a Nuxt.js Project
  • Creating Master Layout
  • Creating Navbar Component
  • Creating The Homepage
  • Creating The About Page
  • Creating The Projects Page
  • Creating The Contact Page
  • Generating Static Site
  • Deploying Our Static Site]
  • Conclusion

All configured for you, so you don’t have to spend time installing and setting up these libraries yourself. Under the hood it uses Webpack with vue-loader and babel-loader to bundle, code-split and minify your code.

Nuxt.js tries to remain minimal as possible by keeping a total size of only 28kb min+gzip (31kb with vuex).

The image below shows a broad overview of how Nuxt.js works:

Let’s now build ourselves a static portfolio website with Nuxt.js.

Create a Nuxt.js Project

We’ll be using the starter template provided by the Nuxt.js team. We’ll install it using the Vue CLI, so you need to first install the Vue CLI in case you don’t have it installed already:

npm install -g vue-cli

Once installed, you can move on to creating Nuxt.js project with it:

vue init nuxt/starter portfolio

We can the project portfolio, you can name it whatever you like. Next, we need to install the dependencies:

cd portfolio
npm install

With the dependencies installed, we can now lauch our project:

npm run dev

The application is now running on http://localhost:3000. If everything went well, you should see a screen as the image below:

Before we dive in to code, let’s take a moment to define what our portfolio website will entail. The portfolio website will contain four (4) pages:

  • What is a Static Site
  • Why Static Site
  • What is Nuxt.js
  • How it Works
  • Create a Nuxt.js Project
  • Creating Master Layout
  • Creating Navbar Component
  • Creating The Homepage
  • Creating The About Page
  • Creating The Projects Page
  • Creating The Contact Page
  • Generating Static Site
  • Deploying Our Static Site]
  • Conclusion
Creating Master Layout

We’ll start by creating a master layout which all our pages will inherit. We’ll be using Bulma as our CSS framework. So we need to pull it into our project. To do so, open nuxt.config.js which is Nuxt.js config file and paste the code below within the link object that is inside the head object:

// nuxt.config.js

{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css' },
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700' },

In addition to pulling in Bulma, we also pull in a Google font.

Within the layouts folder, there is a default.vue file. Open it and replace it content with:

<!-- layouts/default.vue -->

<template>
  <div>
    <nuxt/>
  </div>
</template>

<style>
  html {
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  }
</style>

<nuxt/> will be replaced with the actual content of the page rendered.

Creating Navbar Component

Let’s create a navbar component, so we can add it to the master layout. Within the components folder, create a new Navbar.vue file and paste the code below into it:

<!-- components/Navbar.vue -->

<template>
  <div class="container">
    <nav class="navbar" role="navigation" aria-label="main navigation">
      <div class="navbar-brand">
        <a class="navbar-item" href="/">Portfolio</a>
        <button class="button navbar-burger">
          <span></span>
          <span></span>
          <span></span>
        </button>
      </div>
      <div class="navbar-menu">
        <div class="navbar-end">
          <nuxt-link class="navbar-item" to="/">Home</nuxt-link>
          <nuxt-link class="navbar-item" to="/about">About</nuxt-link>
          <nuxt-link class="navbar-item" to="/projects">Projects</nuxt-link>
          <nuxt-link class="navbar-item" to="/contact">Contact</nuxt-link>
        </div>
      </div>
    </nav>
  </div>
</template>

We can now add the navbar to the master layout. Open layouts/default.vue and update as below:

<!-- layouts/default.vue -->

<template>
  <div>
    <navbar></navbar>
    <nuxt/>
  </div>
</template>

<script>
  import Navbar from '../components/Navbar'

  export default {
    components: {
      Navbar
    }
  }
</script>

<style>
  html {
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  }
</style>

Creating The Homepage

Within the pages folder, you will see an index.vue file. This file is what rendered when we navigate to the home route of our application. What Nuxt.js does is, generate routes based on the files in the pages folder. For instance, if we have index.vue, about.vue and contact.vue files within the pages folder, Nuxt.js will form the routes for the application as /, /about and /contact respectively.

Having said that, open pages/index.vue it and replace it content with the code below:

<!-- pages/index.vue -->

<template>
  <section class="section is-large">
    <div class="container has-text-centered">
      <h1 class="title">Hi, I'm Chimezie Enyinnaya</h1>
      <h2 class="subtitle">a Software Developer based in Lagos, Nigeria.</h2>
    </div>
  </section>
</template>

If we visit the home route again, we should see the new homepage in action:

Creating The About Page

Let’s now create the about page. Within the pages folder, create a new about.vue file and paste the code below into it:

<!-- pages/about.vue -->

<template>
  <section class="section is-medium">
    <div class="container has-text-centered">
      <h1 class="title">About Me</h1>
      <p>
        My name is Chimezie Enyinnaya (AKA mezie), I’m a self taught software developer based in Lagos, Nigeria. I build modern applications for the web! I'm a technical writer, I write technical articles and tutorials for various platforms including <a href="https://scotch.io/@mezie">Scotch.io</a>.
      </p>
    </div>
  </section>
</template>

Navigate to http://localhost:3000/about to see the about page in action:

Creating The Projects Page

In the same vein, let’s create the projects page. Within the pages folder, create a new projects.vue file and paste the code below into it:

<!-- pages/projects.vue -->

<template>
  <section class="section is-medium">
    <div class="container has-text-centered">
      <h1 class="title">My Projects</h1>
      <p>
        Some of my projects can be found on <a href="https://github.com/ammezie" target="_blank">GitHub</a>.
      </p>
    </div>
  </section>
</template>

Navigate to http://localhost:3000/projects to see the projects page in action:

Creating The Contact Page

Finally, we create the contact page. Within the pages folder, create a new contact.vue file and paste the code below into it:

<!-- pages/contact.vue -->

<template>
  <section class="section is-medium">
    <div class="container has-text-centered">
      <h1 class="title">Contact Me</h1>
      <p>
        You can follow me on Twitter: <a href="https://twitter.com/ammezie" target="_blank">@ammezie</a>
      </p>
    </div>
  </section>
</template>

Navigate to http://localhost:3000/contact to see the contact page in action:

We now have a functional portfolio website.

Generating Static Site

Now, we are going to generate a static site for the portfolio website which so far contains bunch of Vue files. To do this, we’ll make use of the nuxt generate command:

npm run generate

The command above will run nuxt generate which will in turn start building the application and generate the static files. Once the it done, you should now have a dist folder which contains the generated static files.

The nuxt generate command works by generating HTML files off the Vue files files within the pages folder for all the application’s routes.

Deploying Our Static Site

The final thing we’ll do is deploy the static site to a live server. For this we’ll be using Netlify, though you can use GitHub Pages or any other static site hosting. So head over to Netlify and sign up if you don’t have an account with them yet.

Once logged in, click the New site from Git button:

Then select your Git provider, I’ll be using GitHub. You will be directed to authorize with GitHub (in my case):

Once authorized, you will be redirected back and you will see a list of your GitHub projects which you can choose the one you want to deploy from:

Next, we need to specify a build command and a publish directory. For the build command we enter npm run generate which is the same command we used to build our files locally. Then we enter dist as the publish directory. Again, this is the same directory the generated files will be be.

Finally, click the Deploy site button to start the deployment.

Once the deployment is complete, Netlify will generate a random name with a URL for your application with which you can access the application. Mine is https://programmer-badger-66651.netlify.com

Conclusion

So in this tutorial, we looked at an overview of Nuxt.js. We also looked at why we might want to create static sites. Finally, we built a static website with Nuxt.js. As pointed out, Nuxt.js does more than just static site generation. You might want to go take a look at the docs to explore it more.

Thanks for reading ❤

If you liked this post, share it with all of your programming buddies!

Responsive ecommerce template built with Vue.js and Nuxt.js

Responsive ecommerce template built with Vue.js and Nuxt.js

Responsive ecommerce template built with Vue.js and Nuxt.js

Vuemmerce - Ecommerce Template

Responsive ecommerce template built with Vue.js and Nuxt.js

Installing
# install Vue cli
npm install -g @vue/cli

# clone repository
git clone https://github.com/ivanlori/Vuemmerce.git

# install dependencies
npm install

# serve with hot reload at localhost:3000
npm run dev

# prepare for production via webpack
npm run production

# generate static pages via nuxt.js for static hosting
nuxt generate

Screenshot

Template Demo


Authors
Contributing on Vuemmerce

Thanks for your interest!

To contribute, please ensure that you have stable Node.js and npm installed.

Follow the steps below.

  1. Follow the Installing instructions
  2. Check the open issues out
  3. Create your branch with a reference to the open issue
  4. Commit your changes: git commit -am 'Add some feature'
  5. Push to the branch: git push origin my-new-feature
  6. Submit a pull request

If you have any questions, feel free to email me at [email protected].


Changelog

See the release notes into changelog.md


License

This project is licensed under the MIT License - see the LICENSE.md file for details

GitHub

ivanlori/Vuemmerce