Nuxt/docs/content/0.index.md

354 lines
8.6 KiB
Markdown
Raw Normal View History

---
title: 'The Intuitive Web Framework'
head.titleTemplate: 'Nuxt: %s'
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.'
showcasesListId: 505
---
::home-hero
---
2022-11-16 16:27:50 +00:00
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.**
2023-01-03 10:43:09 +00:00
#cards
:::card-item
2023-01-03 10:43:09 +00:00
---
image:
path: '/assets/home/ux-fast'
width: '341'
height: '164'
format: 'svg'
2023-01-03 10:43:09 +00:00
---
#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
2023-01-03 10:43:09 +00:00
---
image:
path: '/assets/home/ux-hybrid'
width: '341'
height: '164'
format: 'svg'
2023-01-03 10:43:09 +00:00
---
#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
2023-01-03 10:43:09 +00:00
---
image:
path: '/assets/home/ux-seo'
width: '341'
height: '164'
format: 'svg'
2023-01-03 10:43:09 +00:00
---
#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
2023-01-03 10:43:09 +00:00
---
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.
2023-01-03 10:43:09 +00:00
#cards
:::card-item
2023-01-03 10:43:09 +00:00
---
image:
path: '/assets/home/dx-plug-and-play'
width: '341'
height: '164'
format: 'svg'
2023-01-03 10:43:09 +00:00
---
#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
2023-01-03 10:43:09 +00:00
---
image:
path: '/assets/home/dx-effortless'
width: '341'
height: '164'
format: 'svg'
2023-01-03 10:43:09 +00:00
---
#title
Automation
#description
Repetitive tasks are [automated]{.font-semibold}: auto-imports, code-splitting, typings, minification, bundling for production. and more.
:::
:::card-item
2023-01-03 10:43:09 +00:00
---
image:
path: '/assets/home/dx-batteries'
width: '341'
height: '164'
format: 'svg'
2023-01-03 10:43:09 +00:00
---
#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.
2023-01-03 10:43:09 +00:00
#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.
:::
2023-01-03 10:43:09 +00:00
:::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!
Theres so much attention to detail, ensuring teams have everything at their fingertips to productively build all manners of applications.
:::
2023-01-03 10:43:09 +00:00
:::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
2023-01-03 10:43:09 +00:00
---
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
2023-01-03 10:43:09 +00:00
::home-modules-list
::
::
::home-section
2023-01-03 10:43:09 +00:00
---
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.
2023-01-03 10:43:09 +00:00
#cards
:::card-item
2023-01-03 10:43:09 +00:00
---
icon: 'fa-brands:npm'
to: 'https://www.npmjs.com/package/nuxt'
titleClass: 'text-5xl font-semibold u-text-gray-900'
2023-01-03 10:43:09 +00:00
---
#title
56M
#description
npm downloads
:::
:::card-item
2023-01-03 10:43:09 +00:00
---
icon: 'fa-brands:discord'
to: 'https://discord.com/invite/ps2h6QT'
titleClass: 'text-5xl font-semibold u-text-gray-900'
2023-01-03 10:43:09 +00:00
---
#title
20k
#description
Discord members
:::
:::card-item
2023-01-03 10:43:09 +00:00
---
icon: 'fa-brands:github'
to: 'https://github.com/nuxt'
titleClass: 'text-5xl font-semibold u-text-gray-900'
2023-01-03 10:43:09 +00:00
---
#title
55k
#description
GitHub stars
:::
:::card-item
2023-01-03 10:43:09 +00:00
---
icon: 'fa-brands:twitter'
to: 'https://twitter.com/nuxt_js'
titleClass: 'text-5xl font-semibold u-text-gray-900'
2023-01-03 10:43:09 +00:00
---
#title
76k
#description
Twitter followers
:::
::
::home-section
2023-01-03 10:43:09 +00:00
---
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
2022-11-30 14:52:30 +00:00
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 !
:::
::
2023-01-03 10:43:09 +00:00
:::home-section{ .mb-20 }
---
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.
:::