Learn Nuxt with a Collection of 100+ Tips!
55.4K
Announcement·  

A New Website

We are thrilled to release the new nuxt.com, powered by Nuxt UI and now open source.
Sébastien Chopin

Sébastien Chopin

@Atinux

Benjamin Canac

Benjamin Canac

@benjamincanac

Nuxt.com is the main entry point when you want to learn Nuxt. With more than 300k visitors every month, it was time to give it a new look and feel.

New Design

We are back to the original colors of Nuxt, with a navy background (#020420) and its signature shiny green (#00DC82).

Nuxt Website Screenshot
Discover the Nuxt Design Kit as well as our Logo History.

We wanted to achieve a consistent design across all our official documentations:

Nuxt ImageNuxt ContentNuxt DevToolsNuxt UI

We really love this new design and hope you do too. This is only the first step toward many improvements coming to the website.

Improved Navigation

From now on, you can easily jump between the five main documentation categories:

On the right side, you can see the table of contents as well as community shortcuts: Edit this page, Chat on Discord, etc.

Source Code Buttons

When looking at Nuxt built-in components, composables, utils, commands and kit utilities, you can now jump to the source code by clicking on the button.

Nuxt Source Code Button
Checkout an example on <NuxtLink> documentation page.

Improved Search Feature

You may notice a new modal when hitting CMD+K. We leverage the Nuxt UI <CommandPalette> components combined with Nuxt Content data (search & navigation) to provide a better search experience.

With the command palette, you can:

  • Jump to a page
  • Search in the documentation
  • Search a module
  • Switch the color mode

We plan to add more commands soon.

Migration to Nuxt UI

The new website is powered by Nuxt UI, our UI library tailored made for Nuxt and built on top of Tailwind CSS & Headless UI.

The website also uses Nuxt UI Pro, a set of premium components built on top of Nuxt UI to create beautiful & responsive Nuxt applications in minutes.

It includes components such as <UHeader>, <UFooter>, <ULandingHero>, <ULandingCard> and more.

We plan to launch the full documentation of Nuxt UI Pro at the end of October. If you cannot wait and want early access, you can already purchase a license now and get access to our private repository on GitHub.

This migration was a great opportunity to improve Nuxt UI & UI Pro and fix some bugs, as well as a difference of +9,004 / -23,113 lines of code changed.

Read more about Nuxt UI.

Open Graph Images

We are big fans of having a custom image when we share a link on social media. That's why we have added OG images on all our documentation pages.

Example of the Installation page:

Nuxt OG Image
Discover the Nuxt OG Image module.

Available on GitHub

We are proud to announce that the website is now open source and available on GitHub.

Check out nuxt/nuxt.com on GitHub.

What's next?

This new website is the beginning of upcoming changes we are planing, some of them are:

  • Team & Contributors pages
  • Integrations page to showcase all the possibilities with Nuxt: Hosting, CMS, Database, etc.
  • Templates page (currently nuxt.new) to list official and community starters
  • And more...

We are looking forward to your feedback on Twitter, Discord or GitHub.

Thank you for reading this blog post, and happy Nuxting 🤟

← Back to blog

Nuxt 3.8

Nuxt 3.8 is out, bringing built-in DevTools, automatic Nuxt Image install, a new app manifest and much more.

Nuxt 3.7

Nuxt 3.7 is out, bringing a new CLI, native web streams and response, rendering optimisations, async context support - and much more.