--- title: "A New Website" description: "We are thrilled to release the new nuxt.com, powered by Nuxt UI and now open source." canonical_url: "https://nuxt-git-fix-nuxter-blog-posts-order-nuxt-js.vercel.app/blog/new-website" --- # A New Website > We are thrilled to release the new nuxt.com, powered by Nuxt UI and now open source. [Nuxt.com](http://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-img ```yaml [props] src: https://nuxt-git-fix-nuxter-blog-posts-order-nuxt-js.vercel.app/assets/blog/website/nuxt-website.png alt: Nuxt Website Screenshot width: '832' height: '497' class: rounded-lg border border-gray-700 ``` :: ::read-more{to="https://nuxt-git-fix-nuxter-blog-posts-order-nuxt-js.vercel.app/design-kit" icon="i-lucide-palette"} Discover the **Nuxt Design Kit** as well as our **Logo History**. :: We wanted to achieve a consistent design across all our official documentations: ::div{.grid.sm:grid-cols-2.gap-4} :::nuxt-link{to="https://image.nuxt.com" target="_blank" .hover:border-transparent} ::::nuxt-img ```yaml [props] src: https://nuxt-git-fix-nuxter-blog-posts-order-nuxt-js.vercel.app/assets/blog/website/nuxt-image.png alt: Nuxt Image width: '408' height: '255' class: m-0 border rounded-md border-gray-700 ``` :::: ::: :::nuxt-link{to="https://content.nuxt.com" target="_blank" .hover:border-transparent} ::::nuxt-img ```yaml [props] src: https://nuxt-git-fix-nuxter-blog-posts-order-nuxt-js.vercel.app/assets/blog/website/nuxt-content.png alt: Nuxt Content width: '408' height: '255' class: m-0 border rounded-md border-gray-700 ``` :::: ::: :::nuxt-link{to="https://devtools.nuxt.com" target="_blank" .hover:border-transparent} ::::nuxt-img ```yaml [props] src: https://nuxt-git-fix-nuxter-blog-posts-order-nuxt-js.vercel.app/assets/blog/website/nuxt-devtools.png alt: Nuxt DevTools width: '408' height: '255' class: m-0 border rounded-md border-gray-700 ``` :::: ::: :::nuxt-link{to="https://ui.nuxt.com" target="_blank" .hover:border-transparent} ::::nuxt-img ```yaml [props] src: https://nuxt-git-fix-nuxter-blog-posts-order-nuxt-js.vercel.app/assets/blog/website/nuxt-ui.png alt: Nuxt UI width: '408' height: '255' class: m-0 border rounded-md border-gray-700 ``` :::: ::: :: 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: ::video{poster="https://res.cloudinary.com/nuxt/video/upload/v1697548111/nuxt3/nuxt-website-docs-nav.jpg" controls .rounded.dark:border.dark:border-gray-700} :::source{src="https://res.cloudinary.com/nuxt/video/upload/v1697548111/nuxt3/nuxt-website-docs-nav.webm" type="video/webm"} ::: :::source{src="https://res.cloudinary.com/nuxt/video/upload/v1697548111/nuxt3/nuxt-website-docs-nav.mp4" type="video/mp4"} ::: :::source{src="https://res.cloudinary.com/nuxt/video/upload/v1697548111/nuxt3/nuxt-website-docs-nav.ogg" type="video/ogg"} ::: :: On the right side, you can see the table of contents as well as community shortcuts: Edit this page, Chat on Discord, etc. ::video{poster="https://res.cloudinary.com/nuxt/video/upload/v1697549697/nuxt3/nuxt-website-docs-aside.jpg" controls .rounded.dark:border.dark:border-gray-700} :::source{src="https://res.cloudinary.com/nuxt/video/upload/v1697549697/nuxt3/nuxt-website-docs-aside.webm" type="video/webm"} ::: :::source{src="https://res.cloudinary.com/nuxt/video/upload/v1697549697/nuxt3/nuxt-website-docs-aside.mp4" type="video/mp4"} ::: :::source{src="https://res.cloudinary.com/nuxt/video/upload/v1697549697/nuxt3/nuxt-website-docs-aside.ogg" type="video/ogg"} ::: :: ## Source Code Buttons When looking at Nuxt built-in [components](https://nuxt-git-fix-nuxter-blog-posts-order-nuxt-js.vercel.app/docs/api/components), [composables](https://nuxt-git-fix-nuxter-blog-posts-order-nuxt-js.vercel.app/docs/api/composables), [utils](https://nuxt-git-fix-nuxter-blog-posts-order-nuxt-js.vercel.app/docs/api/utils), [commands](https://nuxt-git-fix-nuxter-blog-posts-order-nuxt-js.vercel.app/docs/api/commands) and [kit utilities](https://nuxt-git-fix-nuxter-blog-posts-order-nuxt-js.vercel.app/docs/api/kit), you can now jump to the source code by clicking on the :u-button{size="xs" color="gray" icon="i-simple-icons-github"}[Source] button. ::nuxt-img ```yaml [props] src: https://nuxt-git-fix-nuxter-blog-posts-order-nuxt-js.vercel.app/assets/blog/website/nuxt-website-source-button.png alt: Nuxt Source Code Button width: '818' height: '343' class: border rounded border-gray-700 ``` :: ::read-more{to="https://nuxt-git-fix-nuxter-blog-posts-order-nuxt-js.vercel.app/docs/api/components/nuxt-link"} Checkout an example on `` documentation page. :: ## Improved Search Feature You may notice a new modal when hitting :kbd{value="meta"} :kbd{value="K"}. We leverage the Nuxt UI [``](https://ui.nuxt.com/components/command-palette) 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. ::video{poster="https://res.cloudinary.com/nuxt/video/upload/v1697550571/nuxt3/nuxt-website-search.jpg" controls .rounded.dark:border.dark:border-gray-700} :::source{src="https://res.cloudinary.com/nuxt/video/upload/v1697550571/nuxt3/nuxt-website-search.webm" type="video/webm"} ::: :::source{src="https://res.cloudinary.com/nuxt/video/upload/v1697550571/nuxt3/nuxt-website-search.mp4" type="video/mp4"} ::: :::source{src="https://res.cloudinary.com/nuxt/video/upload/v1697550571/nuxt3/nuxt-website-search.ogg" type="video/ogg"} ::: :: ## Migration to Nuxt UI The new website is powered by [Nuxt UI](https://ui.nuxt.com), our UI library tailored made for Nuxt and built on top of [Tailwind CSS](https://tailwindcss.com) & [Headless UI](https://headlessui.com/). The website also uses [Nuxt UI Pro](https://ui.nuxt.com/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 ``, ``, ``, `` and more. ::note 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](https://ui.nuxt.com/pro/purchase) now and get access to our private repository on GitHub. :: This [migration](https://github.com/nuxt/nuxt.com/pull/1365) was a great opportunity to improve Nuxt UI & UI Pro and fix some bugs, as well as a difference of [+9,004]{.text-primary} / [-23,113]{.text-error} lines of code changed. ::read-more{to="https://ui.nuxt.com" icon="i-simple-icons-nuxtdotjs" target="_blank"} 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](https://nuxt-git-fix-nuxter-blog-posts-order-nuxt-js.vercel.app/docs/getting-started/installation): ![Nuxt OG Image](https://nuxt-git-fix-nuxter-blog-posts-order-nuxt-js.vercel.app/__og-image__/image/docs/getting-started/introduction/og.png){width="1200" height="630" .border.rounded.border-gray-700}::read-more{to="https://nuxtseo.com/og-image/getting-started/installation" target="_blank"} 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. ::read-more ```yaml [props] to: https://github.com/nuxt/nuxt.com icon: i-simple-icons-github color: gray target: _blank ``` 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](https://nuxt.new)) to list official and community starters - And more... **We are looking forward to your feedback on [Twitter](https://x.com/nuxt_js), [Discord](https://discord.com/invite/nuxt) or [GitHub](https://github.com/nuxt/nuxt.com)**. Thank you for reading this blog post, and happy Nuxting 🤟 ## Sitemap See the full [sitemap](https://nuxt-git-fix-nuxter-blog-posts-order-nuxt-js.vercel.app/sitemap.md) for all pages.