<p>In this series we are going to be talking about Nuxt.js and how it can be used to create statically generated websites</p>

Static Sites With Nuxt

Nuxt is THE framework for Vue.js. It can be used for a lot of things, from creating desktop and mobile apps to universal and single page applications to progressive web apps. And we might see more of Nuxt on this channel doing one of those things. But the feature of Nuxt that is often forgotten is that it can be a great tool for creating static web sites. And this exactly what we are going to be taking a look at in this series. All of this is of course made possible through the power of Vue.

In this first episode of new mini series, we are going to take a look at what Nuxt.js is and how it can help us in creating statically generated websites.

Overview and Install

Routing in Nuxt is a bit different than something you would get with Vue CLI, because in Nuxt you don't actually define the routes, but the routes are generated for you automatically based on your pages folder structure, and that is what we are going to be doing in this episode.

Also we are going to start building our Vue and Nuxt site by creating a header which is going to be available through out of our site using the layout files.

In this episode we are going to start building our Nuxt site, and also take a look at the basic Nuxt routing.

Basic Routing

Now I'm going to show you how you can create custom layouts for your Nuxt static website, we are usually going to need that when one or more of our pages needs a different type of look then the rest of our pages. 

Also you will learn how to make custom error pages, and at the end I'm going to talk a bit about SEO and how to add custom meta tags to the head of your pages, and also how to add Open Graph tags so that users can safely share your site on Facebook.

In this episode we are going to go in depth with Nuxt views and also talk a bit about SEO and meta tags.

Views And SEO

First I'm going to show you how to enable Sass in your Nuxt static site, after that we are going to learn how to create a global CSS file for all your global stylings. 

I'm also going to show you how to make your mixins, variables and functions available throughout your site and all of your components, and lastly we are going to learn how to extract all that CSS into CSS files instead of having all our CSS inlined at the head of our pages.

In this episode we are going to learn how to handle CSS and SCSS in Nuxt.

Handling CSS

Now I'm going to show you how to create a blog on your static site using WordPress. So we are going to get our data from locally installed WordPress installation, and then use Nuxt to display those posts, and then of course statically generate them, so that they are ready for a full static deploy to any server you want.

In this episode we are going to start creating blog section for our Nuxt static site, and what better tool to use for that than WordPress.

Data From WordPress

In the [last episode](https://watch-learn.com/static-sites-nuxt/data-wordpress) we created a blog section on oour site using WordPress and Nuxt of course. We didn't connect our posts to anything right then and there, because as you will see in this episode that is not super obvious how to do, especially if you are building completely statically generated site.

Also in this episode we are going to learn about special `asyncData` method.

In this episode I'm going to show you how to link to every specific post coming from WordPress to our Nuxt application.

Static Sites With Nuxt

Static Sites With NuxtOverview and Install

Static Sites With NuxtBasic Routing

Static Sites With NuxtViews And SEO

Static Sites With NuxtHandling CSS

Static Sites With NuxtData From WordPress

Static Sites With NuxtData From WordPress #2

Get in touch