Blog Posts on nuxt · Debbie Codes

Migrating from Nuxt 2 to Nuxt 3

My personal website was built many years ago and had collected quite a large amount of code as I used my site to play around and experiment new features of Nuxt. It took me ages to finally decide to migrate cause lets face it, we all hate migrations. But I finally did it and I'm so glad I did. I'm going to share with you the steps I took to migrate my site from Nuxt 2 to Nuxt 3.

nuxt

Pagination in Nuxt Content

My blog was getting bigger and bigger and so time to add pagination. I am using Nuxt Content to manage my blog posts. So how do I add pagination to my blog? Let me show you how I did it.

nuxt

Improve Performance with Nuxt Image

Showing the benefits of Nuxt image by analyzing the performance of my website before and after adding the Nuxt Image module.

Nuxt Strapi

When you build your own site sometimes it's important to add analytics to see what is doing well, what your audience is spending time and perhaps find ways of improving your site

Understanding Nuxt Middleware

Middleware lets you define custom functions that can be run before rendering either a page or a group of pages which we call layouts.

nuxt

Customizing the Nuxt Loading Component

We can customize the Loading for our Client Side applications as well as the loading Progress bar for our server rendered applications and we can even customize this to create our own.

nuxt

Deploying your Nuxt app to Netlify

If you are building a Nuxt static site and want to deploy it easily and for free then Netlify is a great choice. Let me show you how easy it is.

nuxt

How Progressive Web Apps work

Progressive web apps will really help your performance and you can install them on your home screen or desktop and have that app like feel for your website. Let's have a look at how they work.

Adding Vue Plugins to your Nuxt APP

In Nuxt we can add Vue plugins to our application by creating a Nuxt plugin and then registering that plugin in the Nuxt Config file.

nuxt

Why I Love Nuxt

I have been using Nuxt in all of my recent tech jobs but why did I start using it? What problems did I have trying to convince the team and more important the clients. And why should you use Nuxt?

Lite YouTube Embeds

If you are adding YouTube videos to your site you might notice that they can load quite slowly especially when loading iframes. However this is a better way. With this library your YouTube videos will load super fast and your site will be more performant because of it.

Adding a sitemap to your Nuxt site

Automatically generate or serve a dynamic sitemap.xml for your Nuxt projects!

nuxt

Adding analytics to your Nuxt site

When you build your own site sometimes it's important to add analytics to see what is doing well, what your audience is spending time and perhaps find ways of improving your site

nuxt

Creating a Nuxt Module

Modules are functions that are called sequentially when booting Nuxt. The framework waits for each module to finish before continuing. In this way, modules can customize almost any aspect of your project. Nuxt modules can be incorporated into npm packages. This makes them easy to reuse across projects and to share with the community.

nuxt

How we use Nuxt at The NuxtJS Company

The first commit for Nuxt.js on Github was made on October 26th, 2016. Since then the Nuxt.js framework has grown from 2 creators in 2016 to having 10 full-time employees at the NuxtJS company, as well as the amazing Nuxt community with maintainers, ambassadors and contributors.

nuxt

Vue Directives

Vue Directives are a great way of doing things like trimming your models or only showing something once. So many cool directives to make your life easier when coding in Vue.

vue
nuxt

Advanced i18n in Nuxt using Interpolations

That's where i18n interpolation comes into practice. With i18n, instead of using v-html we can instead use interpolation. How? i18n gives us an <i18n> component that we can use on any of our pages or inside our components.

nuxt
vue

Adding a cookie consent banner

When in Europe and using cookies we need to show a cookie consent banner so our users are aware that we are using cookies on the site.

nuxt

Setting up cypress

Let's take a look at how you setup Cypress in your Nuxt.js project, setup a github action for continuous integration so that Netlify will run the tests every time your application is building.

nuxt
testing

Fetching graphQL queries

nuxt

Migrating to Nuxt content

If you already have documentation set up and would like to migrate to Nuxt Content then this guide should help you make migrate easily and take advantage of what the docs theme gives you.

nuxt

Using Apollo to Fetch Data

Using Apollo to Fetch Data from a GraphQL API

nuxt

Create a Blog with Nuxt Content

The content module is a git files based headless CMS that provides powerful features when it comes to write blogs, documentation sites or just adding content to any regular website. In this post we will go through most of the benefits of this module and discover how we can create a blog with it.

nuxt

Styling your active classes in Nuxt.js

Nuxt.js, which uses `vue-router`, can easily tell what route you are on and therefore can add a class to that link when the user is on that page. By default this class is called `nuxt-link-active`.

nuxt

Adding a PWA in Nuxt.js

Most people don't realise how easy it really is to add a PWA with Nuxt.js. Progressive Web Apps (PWA) deliver native-like capabilities, reliability, and installability while reaching anyone, anywhere, on any device with a single codebase.

Advanced i18n in Nuxt using Interpolations

With Nuxt components you can auto import your components really easily and even comes with support for dynamic imports otherwise known as lazy loading. That means you can just add your component in the template without having to add it to the script tag. This makes development much faster.

nuxt

Moving from @nuxtjs/dotenv to runtime config

In our frontend applications, we often use APIs and third-party integrations which require us to use configuration data which is usually provided by environment variables. These variables should not be exposed to the frontend as the browser environment is accessible by all visitors.

nuxt

Going dark with Nuxt.js color mode

The @nuxtjs/color-mode module is a cool way of adding dark mode to your site. But not only does it switch from dark to light but also any color theme (eg sepia mode). It even has auto detection so that it will choose the right mode depending on your system appearance.

nuxt

ignoring your files with Nuxt.js

In Nuxt.js there are 3 different ways to ignore files during the build phase. This is great for static site generation which means you can still generate your site with a broken page as it will be ignored.

nuxt

Creating an error page in Nuxt.js

An error page is the page you see when you arrive at a page that can't be found. These are typically called 404 pages. To create an error page all you need to do is create an `error.vue` file in your layouts folder. Layouts?

nuxt

Configure the Nuxt.js server to see your site on your mobile

Sometimes you want to test out your site on your actual mobile device or tablet and not just in the dev tools. This is great when bug fixing or just to see how it looks in a real environment.

nuxt

Show a message when your user is offline with $nuxt.isOffline

Did you know that `$nuxt.isOffline` can be used to show your users content based on if they are online or not.

nuxt

The Nuxt Loading Progress Bar

Nuxt.js automatically gives you a loading progress bar component which is shown between routes. Did you know you can customise it, disable it or create your own component?

nuxt

Let's Analyze your webpack bundles with Nuxt

As we add so many third party libraries to our site sometimes we forget that perhaps they are going to have an impact on our performance or sometimes we just don't read the install instructions and install the whole library instead of only what we need.

Page and Layout Transitions in Nuxt.js

With Nuxt.js it is really easy to add transitions between your pages. You can create transitions for all your pages or layouts and you can even have different transitions for specific pages.

nuxt