If you have been following my channel or website lately you could see that there are a [lot](https://watch-learn.com/series/creating-svelte-sapper-and-wordpress-website) [of](https://watch-learn.com/series/creating-rent-car-app-vue-and-october) [series](https://watch-learn.com/series/static-sites-nuxt) where we use CMSs like WordPress or October CMS to create the data store and administration for our our frontend applications. This is an okay approach, but this means that we are not using most of the functionalities of those systems, like their frontend systems, because we create the frontend ourselves, using technologies like Vue or Svelte.

So wouldn't it be great if we used a CMS that is actually made for this type of usage. There are a few on the market, and they are usually sold as a service. However Strapi is fully open sourced, self hosted CMS for this exact purpose. And we are going to check it out in this episode.

In this episode we are going to take a look at a headless CMS called Strapi.

Let's Checkout... Strapi CMS

Zeit is the company behind extremely popular [Next.js](https://nextjs.org/) framework and [Hyper Terminal](https://hyper.is/), and also behind this great hosting service called "Zeit Now" and CLI tool that we are going to take a look in this episode.

Zeit Now enables you to easily push your static sites, built with any of currently popular frameworks like Vue, React, Angular etc. to their hosting with one command and without any configuration whatsoever. As you will see it is super cool.

In this video we are going to take a look at service and CLI tool called Zeit Now.

Easy Deployments With Zeit Now

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.

Data From WordPress #2

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

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 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

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

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

First thing you have to understand is that we are not actually logging out of the application, because we were never actually logged in, we only get or remove our security JWT token. So when you remove the token you then don't have access to routes that require authentication, and then you are effectivley logged out.

In this episode I'm quickly going to show you how to logout out of your OctoberCMS, Vue and Vuex application.

Tutorials tagged with: vue, Vue

Get in touch