Archive search

Find the stories you need

nuxt.js

Problems With Server-Side Plugins in Nuxt.js

In this article, Josh Deltener explains one of the gotchas when writing server-side rendered apps. Though he mentions plugins, the reality is, everything that you declare as global (outside of the function scope) will most likely persist on the server and can leak to other users. You can read more about this behavior on Vue’s SSR docs.

API Factories for Vue.js & Nuxt

How are you organizing your API calls? Have you considered API factories to make your codebase easier to work with, increasing your team’s productivity?

Creating Redirects With Nuxt

In this post we'll dive into the different ways you can create redirects with Nuxt.

How to use Nuxt components inside Storyblok Rich-Text editor

Find out how to add components directly in the Storyblok's Rich-text editor and how to create their implementation in Nuxt.

Whoops! We couldn't access this Tweet.

Language Aware Nuxt.js Routing

Looking for a solid way to combine i18n and language-based routing in Nuxt.js? Make sure to read this article as it covers several ways to make that integration as seamless as possible.

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. Let's create a module that uses ngrok to get a Public URL that you can share while working in Development.

The State of Nuxt (November Edition)

Sébastien Chopin, creator of Nuxt.js explaining the current state of Nuxt 2 and the roadmap for Nuxt 3 and what to expect.

Nuxt SSR Optimizing Tips

Learn about the difference between server-side and client-side rendered optimization, and how to optimize your Nuxt SSR applications for optimal performance.

How to build a TWA Android app out of your Nuxt.js PWA

Did you know that you can package your progressive web app (PWA) in an Android app and publish it on the Google Play Store? Well, you can. This way, mobile users will be able to find it and download it, and everything will behave like in a native application. Personally, I wasn’t aware of this until I came across the TWA acronym, which means: trusted web activity.

Using Nuxt Content with a JSON File

With the recent introduction of Nuxt Content, we can now create complete applications using content from JSON files with Nuxt. This blog post shows how this can be used to extend static pages with data, create dynamic pages, and also dynamic navigations.

Nuxt Composition API

Learn which challenges the Composition API brought to Nuxt.js, and which posibilities we got when the Nuxt team released the powerful @nuxtjs/composition-api module.

Release v3.0.0 · nuxt-community/pwa-module · GitHub

Zero config PWA solution for Nuxt.js now with Workbox 5.x support.

Release v1.5.0 · nuxt/content · GitHub

Write in a content/ directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a Git-based Headless CMS - nuxt/content

Whoops! We couldn't access this Tweet.

Build file-based theme inheritance module in Nuxt

Learn how to build a theme inheritance module in Nuxt.js. A perfect module for when you want to change parts of your codebase for special campaigns such as Black Friday or the holidays sales.

Improve Your Developer Experience With Nuxt Components

Explore how you can import and register Vue components automatically using @nuxt/components module.

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.

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.

How to build a Jamstack multi-language blog with Nuxt.js

As Jamstack is getting increasingly popular, there are some areas where we're still learning new things. One of them is adding internalization support. Learn how to do it using Nuxt and Strapi CMS.

#17: Nuxt and Next Steps with Debbie O'Brien

On today’s episode we have special guest, Debbie O’Brien, Head of Learning and Developer Advocate at Nuxt.js. Debbie tells us all about Nuxt. She even has an exciting announcement about a new release coming soon with Markdown in Nuxt that has the panel super excited!

Whoops! We couldn't access this Tweet.
Introduction - Nuxt Content

Introduction - Nuxt Content

Empower your NuxtJS application with @nuxt/content module: write in a content/ directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a Git-based Headless CMS.

Announcing Nuxt's $2M seed round

Three years ago, my brother Sébastien and I were open sourcing our code to build Vue.js application server side rendered easily. Today, we are incredibly excited to announce that NuxtJS has raised $2M in seed funding.

What to do when Vue hydration fails

SSR is amazing but also comes with errors you might have not seen before. Especially one problem still boggles lots of minds: When Vue Hydration fails. In this article we will take a look at possible reasons, explain what the error means and how to fix it.

Understanding how fetch works in Nuxt 2.12

Explore different features of the fetch hook and learn a brand new way to bring data into Nuxt applications.

Cut Your Nuxt.js generate Build Time in Half with context.payload

Markus Oberlehner is back with another great article on using the context.payload param in your asyncData. This especially important if you are using the "static generator" functionality of Nuxt along with dynamic routes. Combining those functions allows you to preload the data that would normally be loaded inside asyncData during build step.

Whoops! We couldn't access this Tweet.
Whoops! We couldn't access this Tweet.

The Ultimate Nuxt API Setup

Although Nuxt ships with a built-in connect-based Node server you can replace it with any solution that you’d like and use Nuxt only as a rendering middleware. In this article, Jonas Galvez explores a setup where he uses Fastify to build the API part of a Nuxt app.

Release v2.11.0 · nuxt/nuxt.js · GitHub

New release of Nuxt.js, which includes multiple bug fixes as well as several new improvements like migrating to the new Vue-Router v3.1.x.

How to Load Third-Party Scripts in Nuxt.js

If you use Nuxt.js you might have stumbled upon this problem – how to add links to third-party scripts that you can’t install with NPM. For example some analytics solutions. Or what if you need to add those to certain routes only? Alex provides all the answers in this article.

20 Nuxt Modules (with Tips) to Increase Your Productivity and Build Web Apps Faster

Nada Rifki has written down a list of her 20 favourite Nuxt.js modules that she recommends for most Nuxt users. Along with the list, there is a short description of what it does and a few tips along the way.

ReactiveConf 2019 – Sebastien Chopin: Be Lazy, Be Smart, Be Nuxt.

Sebastien Chopin, Nuxt.js co-author, will demonstrate how to create a web application quickly using Nuxt.js and explaining how it works under the hood.

How to setup Nuxt with TypeScript

TypeScript is becoming quite popular in the Vue world and this includes Nuxt.js applications. Check out this video to learn how to set up a new Nuxt app with TypeScript.

Nuxt + TypeScript + Apollo: a bumpy road

Nuxt with TypeScript and Apollo – sounds like an amazing stack to work with. But is it really? Read this article and find out! Such a bait description, I know!

Whoops! We couldn't access this Tweet.
Whoops! We couldn't access this Tweet.

How to load dynamic images in Vue and Nuxt with ease

Importing images from the assets folder when the path is static is not that difficult in both frameworks, Vue and Nuxt.js. But loading images with dynamic paths often confuses developers that are fairly new to one of these frameworks. In the following article, I want to demystify the process of dynamic image loading in Vue and Nuxt, and explain why static images can be loaded easily and what to do when the path has to be dynamic.

Introducing NuxtPress 📗

Introducing NuxtPress 📗

Say hi to NuxtPress. The firstborn of Nuxt and VuePress... Wait what? Just kidding! 😂 It has nothing to do with VuePress and everything with Nuxt. NuxtPress is a static page generator based on Nuxt.js, created by Jonas Galvez. However, contrary to VuePress, this static generator is more oriented towards building blogs than documentation, though this is also possible.

You can read the the introduction story here.

Whoops! We couldn't access this Tweet.

Understanding Nuxt & Vue hooks and lifecycle

Here’s the 3rd and last part of a series of articles that should help you get a deeper understanding of how Nuxt works underneath. The last part also comes with a handy cheat-sheet of which hooks are called in which context (client/server/both).

NuxtJS: From Terminal to Browser

If you missed last weeks Nuxt.js release, here’s a short article that highlights one of the most important changes – being able to use the browser console to see all the console.logs that would normally only show up in the terminal (when doing SSR). Already tried that feature and love it! Makes debugging SSR code so much easier.

7 Nuxt Tips Revisited

A year ago Jonas Galvez has written a series of 7 tips when working with Nuxt apps. Now as the framework as evolved, he’s revisiting those tips. Check them out. I’m personally interested in switching from the axios module to the new http module that uses native fetch.

Vue.js And SEO: How To Optimize Reactive Websites For Search Engines And Bots

If you’re concerned about having your webapp appear somewhere in the top 5 Google search results (and you probably should if you build a public facing app), you might want to take a look on this article. It covers some of the strategies to improve your SEO and some less popular traps that might accidentally hit your search position.

What's new in Nuxt

What's new in Nuxt

Wondering what’s there to come in Nuxt.js? Sebastien Chopin talks about the changes in upcoming releases: Adding and removing modules in Nuxt CLI; Improved testing experience with Nuxt Test Utils using Puppeteer, Cypress & Jest; multiple worker usage during SSR and more!

Whoops! We couldn't access this Tweet.

Nuxt: The Hard Parts

A common issue people have when working with Nuxt.js is integrating the @nuxtjs/auth module. In this article, you'll learn about core concepts of Nuxt.js that are critical to being successful when working with the auth module.

How to create a blog using Nuxt.js and Contentful

How to create a blog using Nuxt.js and Contentful

Building a blog? Want to use Vue? Worried about SEO? Then you should probably go with Nuxt.js combined with a headless CMS. This allows you to do server-side rendering of the content fetched from a headless CMS like Contentful. This is actually the same stack that powers this website.

An (Almost) Comprehensive Guide on Using Storybook with Nuxt.js

It's no secret: We all love Nuxt, the universal Vue.js framework. We are also big fans of Storybook, one of the best (if not the best itself) UI component development tools out there. So if you're like us, this Nuxt/Storybook integration guide from Lawrence Braun is a must read!

Release v2.6.0 · nuxt/nuxt.js · GitHub

Nuxt.js v2.6.0 has been released. There are no breaking changes in this release. However, if you had some issues with v2.5 on production, make sure to read the release notes since the issues have been resolved.

Free Nuxt.js Tutorial — Creating an App

There’s a free lesson from the Vue Mastery’s Nuxt course, where they are teaching how to build an event management application. If you don’t feel like reading, there’s also a video version of it!

Vue Meta has a new website!

Metadata manager for Vue.js has a new pretty documentation.

Creating A Spotify-Powered App Using Nuxt.js

Now this is huge! Haven’t seen such a long and detailed tutorial in a while. Thought about building a music app powered by Spotify? Check out this article by Cher Scarlett, who walks you through the whole setup including server configuration and the Nuxt app. Amazing write-up.

Whoops! We couldn't access this Tweet.
Whoops! We couldn't access this Tweet.
How to use asyncData to Integrate Contentful into Nuxt

How to use asyncData to Integrate Contentful into Nuxt

Although I wouldn’t say that Contentful plus Nuxt.js equals Fire, I mean that would be dangerous. And our news page uses both those tools and works just fine. But I have to admit that knowing how to connect those two might come super useful the next time you will have to build a company page, portfolio or a blog. Or something completely different.

Going JAMstack with Netlify and Nuxt

JAMstack is a growing and modern web architecture. I gradually migrated several Nuxt.js projects from server side rendering over to JAMstack and write about my experiences, recommendations and the migration process itself.

7 Problems you can avoid by using Nuxt.js for your next Vue app

Here’s a pretty nice article written by Gregg Pollack that goes through some of the less obvious reasons you might want to use Nuxt.js for your application. Even if you don’t need the server-side rendering.

Rebuilding My Blog in Vue: Part 1

A new series where Michael Thiessen goes through several strategies and tools for building a blog as an alternative to Gatsby. The contenders: Vuepress, Gridsome, Nuxt and Vue-CLI. If you plan on build a blog-like website yourself, this is something to keep track of.

Nuxt.js and TypeScript as of Jan 2019

Building a Nuxt based application? Would you like write it using TypeScript? Here’s a guide on how to do it for both versions <= 2.3 as well as the new version 2.4.

Nuxt.js v2.4.0 is out! TypeScript, Smart prefetching and more...

Nuxt.js v2.4.0 is out! TypeScript, Smart prefetching and more...

Wow! Nuxt.js v2.4.0 is finally here with tons of useful changes. First of all, TypeScript is now fully supported. The new version also comes with the support for prefetching all the nuxt-links that are in the current viewport resulting in a huge perceived performance gain; improved HMR for Vuex related actions and better autocompletion thanks to Vetur. More to come thanks to the new RFC process that will be used now for future releases.

Selectively enable SSR or SPA mode in a Nuxt.js app

SSR comes with certain caveats, including no access to APIs like the LocalStorage on server-side. But what if you could enable SSR only for pages where SEO is needed and use the “traditional” SPA mode elsewhere? You can! Learn how in this article.

Organize and decouple your API calls in Nuxt.js

As your Nuxt app grows, so does your backend. With time, your API evolves from a hand full of endpoints into an enormous jungle of resources. And you want to stay the king of the jungle! Learn to organize and abstract your API resources in this post.

Release v2.3.1 · nuxt/nuxt.js · GitHub

A new release of Nuxt.js comes with support for modern mode and some additional improvements to the CLI tool.

Nuxt.js (v2), Firestore & SSR 🔥

A simple example showing how to integrate Firebase Firestore into a Nuxt.js project while keeping the server-side rendering capabilities that come with the amazing Universal SSR mode of Nuxt.js.

How to Render Vue Apps to a Server Using Nuxt

Here’s an entry-level tutorial on how to get started with server-side rendering (with Nuxt.js) that will improve your application SEO and speed.

99.5: Sébastien Chopin - Building Universal Vue.js Apps with Nuxt.js

In this episode Adam Wathan talks to Sébastien Chopin about Nuxt.js. How it all started, how it works and what the future holds for the framework.

The Ultimate Nuxt.js Cheat Sheet 📄

Speaking of server-side rendered applications – Vue Mastery has released a free Nuxt.js Essentials Cheat Sheet (in the same style as the Vue.js Essentials Cheat Sheet). If you end up going back to docs to look up the syntax – this is something for you.

The guide to write universal, SSR-ready Vue components

Alexander Lichter wrote a guide on how to to make sure your components won’t cause any issues when used during server-side rendering. The guide includes tips on how to avoid memory-leaks, manage the usage of platform-specific APIs and how to work with directives.

Whoops! We couldn't access this Tweet.

Getting Started with Nuxt.js

If the official Nuxt.js docs haven’t clicked with you, here’s another take at explaining what Nuxt.js is doing and how to get started with it.

Nuxt.js 2.0: Webpack 4, ESM Modules, create-nuxt-app and more!

The long awaited Nuxt.js 2.0 release is finally here. Changes include the addition of create-nuxt-app, and an update to Webpack 4 & Babel 7. A full list of changes can be found here.

7 Frontend Architecture Lessons From Nuxt.js

A great article by Kevin Ball where he goes through some of the design decisions and patterns that drive the Nuxt.js framework. This article works great with the previous one by Krutie Patel.

Universal application code structure in Nuxt.js

Krutie Patel – the master of educational diagrams for web developers strikes back! This time she is explaining the architecture behind Nuxt.js. A must read for everyone that still wonders how Nuxt is working underneath connecting all the files.

Nuxt.js on Brotli

You probably heard about GZIP – it’s used widely to compress website assets around the web. However, there are alternatives to GZIP. One of them is called Brotli, created by Google. Here’s an article by Alexander Lichter, who explains how to use it with Nuxt.js thanks to a middleware called ShrinkRay.

Nuxt.js Lifecycle Hooks diagram

Here’s a missing piece of the Nuxt.js docs – a diagram that takes you through all the lifecycle hooks in a Nuxt based applications. Created by the awesome @krutiepatel.

Dockerise your Nuxt SSR App like a boss! (A True Vue Vixens story)

For those of you who are also interested in devops – here’s a short tutorial by Diana Rodriguez on how to use Docker to simplify your Nuxt app deployment.

Configuring Dynamic Environments in Nuxt.js Project

Maisnam Raju wrote a quick tutorial on how to define dynamic environment variables for Nuxt.js based apps that can be used on different deployment platforms like Google App Engine or Digital Ocean.

A crash course on serverless-side rendering with Vue.js, Nuxt.js and AWS Lambda

If you're running Nuxt configured for server rendered deployment, you usually need to be running a Node server. Adnan Rahic wrote up an article showing how to render your Nuxt app using AWS Lamdba with the serverless framework.

Sending emails through Nuxt.js

You probably already know that you can use Nuxt.js as a renderer for an Express app. But here’s a plot twist – did you know that you can use Express as part of a Nuxt.js middleware? Alexander Lichter shows how to do just that in order to be able to send emails directly from your Nuxt app.

Whoops! We couldn't access this Tweet.

How to run Nuxt.js on DigitalOcean?

An easy tutorial on how to setup and deploy a Nuxt.js app on DigitalOcean.

How to Add Structured JSON+LD Data to Nuxt.js

Adding structured JSON+LD data allows your pages to be displayed in Google search results in a more specialised way – like a product or recipe. This might hugely improve your SEO and is quite easily implemented if you’re already using Nuxt.js. Read the article by Matt Hagemann to learn how to make us of it!

Choosing a Nuxt Mode For Your Next Web App

Emerson Matthews will guide you through 3 types of Web Apps with different degree of Nuxt engagement, commenting on their pros and cons - helpful when starting new project and choosing the right approach.

Async Data Options in Vue's Nuxt.js

Here’s an overview of the many ways to fetch async data in a Universal application such as a Nuxt.js app. The article covers how to use those and when you should be using those for specific cases.