8.6 KiB
| title | head.titleTemplate | description | showcasesListId |
|---|---|---|---|
| The Intuitive Web Framework | Nuxt: %s | Build your next Vue.js application with confidence using Nuxt. An open source framework under MIT license that makes web development simple and powerful. | 505 |
::home-hero
topButtonText: 'Announcing 3.0 stable' topButtonLink: '/v3' primaryButtonText: 'Get started' primaryButtonLink: '/docs/getting-started/introduction' secondaryButtonText: 'Open on GitHub' secondaryButtonLink: 'https://github.com/nuxt/framework'
#title The Intuitive Web Framework
#titleAnimationWord today.
#description Build your next Vue.js application with confidence using Nuxt. An open source framework under MIT license that makes web development simple and powerful. ::
::home-section{visible} #title Deliver an optimized [User Experience]{.text-transparent .bg-clip-text .bg-gradient-to-r .from-green-400 .to-teal-400} #description How a user interacts with and experiences your website will determine your impact. Utility, ease of use, and efficiency are key. Nuxt is built with a set of features that make this possible. #cards :::card-item
image: path: '/assets/home/ux-fast' width: '341' height: '164' format: 'svg'
#title Fast and Furious #description Optimized with code-splitting, tree-shaking, optimized cold-start, link prefetching, payload extraction, just to name a few. Fast by default so you can focus on building. ::: :::card-item
image: path: '/assets/home/ux-hybrid' width: '341' height: '164' format: 'svg'
#title On-demand Rendering #description Decide what rendering strategy at the route level: SSR, SSG, CSR, ISR, ESR, SWR. Build any kind of website or web application with optimized performance in mind. ::: :::card-item
image: path: '/assets/home/ux-seo' width: '341' height: '164' format: 'svg'
#title SEO & Web Vitals #description By leveraging server-side rendering, ESM format and optimized images, Nuxt websites are indexable by search engines while giving the feeling of an app to the end-users. ::: ::
::home-section
to: "/showcase" titleSizeClass: 'text-2xl font-semibold md:text-3xl lg:text-4xl'
#title Trusted by world-class companies #description Explore our selection of websites & applications made with Nuxt. F-500 companies, creative agencies and freelancers all trust us. #link Discover our showcase #extra :::home-companies-carousel ::: ::
::home-section
buttons:
- label: 'Try it now' size: 'xl' variant: 'primary-gradient' to: '/docs/getting-started/installation'
#title Discover a new [Developer Experience]{.text-transparent .bg-clip-text .bg-gradient-to-r .from-green-400 .to-teal-400} #description Developers deserve solutions as well designed as non-technical people. Our focus is to empower Vue developers to ship great softwares with confidence. #cards :::card-item
image: path: '/assets/home/dx-plug-and-play' width: '341' height: '164' format: 'svg'
#title Plug & Play #description Unlock features by creating folders and files with the [most intuitive directory structure]{.font-semibold} made for developers and teams. ::: :::card-item
image: path: '/assets/home/dx-effortless' width: '341' height: '164' format: 'svg'
#title Automation #description Repetitive tasks are [automated]{.font-semibold}: auto-imports, code-splitting, typings, minification, bundling for production. and more. ::: :::card-item
image: path: '/assets/home/dx-batteries' width: '341' height: '164' format: 'svg'
#title Batteries Included #description Data fetching, state management, meta tags helpers, route guards, cookies, error handling, bundle analyzer and more. ::: ::
::home-section
titleSizeClass: 'text-2xl font-semibold md:text-3xl lg:text-4xl'
#title Trusted by the world wide web #description Their opinions are valuable and worth sharing to everyone. #cards :::home-testimonials-item
authorImg: evan authorUrl: 'https://twitter.com/youyuxi'
#author Evan You #job Creator of VueJS #quote Nuxt offers a compelling solution and a great ecosystem to help you ship fullstack Vue apps that are performant and SEO friendly. The flexibility to choose between SSR and SSG is icing on the cake. :::
:::home-testimonials-item
authorImg: sarah authorUrl: 'https://twitter.com/sarah_edo'
#author Sarah Drasner #job Core Team of Vue.js #quote Nuxt has outstanding developer productivity, experience, and performance right out of the gate! There’s so much attention to detail, ensuring teams have everything at their fingertips to productively build all manners of applications. :::
:::home-testimonials-item
authorImg: addy authorUrl: 'https://twitter.com/addyosmani'
#author Addy Osmani #job Chief Engineer of Chrome #quote Nuxt is a fantastic choice for teams building a production-grade product on the web. It aims to bake in performance best-practices while maintaining excellent Vue.js DX. ::: ::
::home-section
buttons:
- label: 'Explore Nuxt modules' size: 'xl' variant: 'primary-gradient' to: '/modules'
#title Ship faster with [Nuxt modules]{.text-transparent .bg-clip-text .bg-gradient-to-r .from-green-400 .to-teal-400} #description Nuxt is made with a robust plugin system. Integrate with popular CMS or UI libraries with one line of code. With more than 15M monthly downloads and 1K contributors, Nuxt modules are your day to day companions. #link Explore Nuxt modules #extra ::home-modules-list :: ::
::home-section
cardsClass: 'lg:grid-cols-4'
#title A community of [Web builders]{.text-transparent .bg-clip-text .bg-gradient-to-r .from-green-400 .to-teal-300} #description Nuxt is composed of web builders all over the world who like to craft beautiful user experiences with Vue.js. #cards :::card-item
icon: 'fa-brands:npm' to: 'https://www.npmjs.com/package/nuxt' titleClass: 'text-5xl font-semibold u-text-gray-900'
#title 56M #description npm downloads ::: :::card-item
icon: 'fa-brands:discord' to: 'https://discord.com/invite/ps2h6QT' titleClass: 'text-5xl font-semibold u-text-gray-900'
#title 20k #description Discord members ::: :::card-item
icon: 'fa-brands:github' to: 'https://github.com/nuxt' titleClass: 'text-5xl font-semibold u-text-gray-900'
#title 55k #description GitHub stars ::: :::card-item
icon: 'fa-brands:twitter' to: 'https://twitter.com/nuxt_js' titleClass: 'text-5xl font-semibold u-text-gray-900'
#title 76k #description Twitter followers ::: ::
::home-section
buttons:
- label: 'Discover our solutions' size: 'xl' variant: 'primary-gradient' to: '/support/solutions'
#title A solution to cover [all your needs]{.text-transparent .bg-clip-text .bg-gradient-to-r .from-green-400 .to-teal-400} #description Developers deserve solutions as well designed as non-technical people. Our focus is to empower Vue developers to ship great softwares with confidence. #cards :::card-item
headerClass: 'justify-start px-4 pt-4 sm:px-6' image: path: '/assets/home/needs-official-agency' width: '52' height: '58' format: 'png' contentClass: 'gap-y-2' to: '/support/agencies'
#title Official agency partners #description A carefully built network of trusted agencies from all over the world! ::: :::card-item
headerClass: 'justify-start px-4 pt-4 sm:px-6' image: path: '/assets/home/needs-nuxt-expert' width: '52' height: '58' format: 'png' contentClass: 'gap-y-2' to: '/support/solutions'
#title Nuxt experts network #description A network of freelance from all over the world, certified by the NuxtLabs team ! ::: :::card-item
headerClass: 'justify-start px-4 pt-4 sm:px-6' contentClass: 'gap-y-2' image: path: '/assets/home/needs-community-support' width: '52' height: '58' format: 'png' to: '/support/solutions'
#title Community support #description More than 2000 active contributors on multiple platforms are here to help ! ::: ::
:::home-section
sectionAlign: 'row' buttons:
- label: 'Get started' size: 'xl' variant: 'primary-gradient' to: '/docs/getting-started/introduction'
- label: 'Explore Examples' size: 'xl' variant: 'secondary' to: '/docs/examples/essentials/hello-world'
#sectionTitle GETTING STARTED #title Start your Nuxt Journey #description Learn everything you need to know, from beginner to master. :::