mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-22 05:35:13 +00:00
docs: refactor cards (#9935)
* refactor: cards * refactor: update image props * docs(version): update to 0.2.5
This commit is contained in:
Florent Delerue
GitHub
parent
da38c62000
commit
c6bf146976
@ -32,22 +32,26 @@ Deliver an optimized [User Experience]{.text-transparent .bg-clip-text .bg-gradi
|
||||
#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
|
||||
:::home-card-item
|
||||
:::card-item
|
||||
---
|
||||
image:
|
||||
light: 'ux-fast-light.svg'
|
||||
dark: 'ux-fast.svg'
|
||||
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.
|
||||
:::
|
||||
:::home-card-item
|
||||
:::card-item
|
||||
---
|
||||
image:
|
||||
light: 'ux-hybrid-light.svg'
|
||||
dark: 'ux-hybrid.svg'
|
||||
path: '/assets/home/ux-hybrid'
|
||||
width: '341'
|
||||
height: '164'
|
||||
format: 'svg'
|
||||
---
|
||||
#title
|
||||
On-demand Rendering
|
||||
@ -55,11 +59,13 @@ How a user interacts with and experiences your website will determine your impac
|
||||
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.
|
||||
:::
|
||||
:::home-card-item
|
||||
:::card-item
|
||||
---
|
||||
image:
|
||||
light: 'ux-seo-light.svg'
|
||||
dark: 'ux-seo.svg'
|
||||
path: '/assets/home/ux-seo'
|
||||
width: '341'
|
||||
height: '164'
|
||||
format: 'svg'
|
||||
---
|
||||
#title
|
||||
SEO & Web Vitals
|
||||
@ -97,33 +103,39 @@ Discover a new [Developer Experience]{.text-transparent .bg-clip-text .bg-gradie
|
||||
#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
|
||||
:::home-card-item
|
||||
:::card-item
|
||||
---
|
||||
image:
|
||||
light: 'dx-plug-and-play-light.svg'
|
||||
dark: 'dx-plug-and-play.svg'
|
||||
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.
|
||||
:::
|
||||
:::home-card-item
|
||||
:::card-item
|
||||
---
|
||||
image:
|
||||
light: 'dx-effortless-light.svg'
|
||||
dark: dx-effortless.svg
|
||||
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.
|
||||
:::
|
||||
:::home-card-item
|
||||
:::card-item
|
||||
---
|
||||
image:
|
||||
light: 'dx-batteries-light.svg'
|
||||
dark: 'dx-batteries.svg'
|
||||
path: '/assets/home/dx-batteries'
|
||||
width: '341'
|
||||
height: '164'
|
||||
format: 'svg'
|
||||
---
|
||||
#title
|
||||
Batteries Included
|
||||
@ -210,40 +222,44 @@ A community of [Web builders]{.text-transparent .bg-clip-text .bg-gradient-to-r
|
||||
#description
|
||||
Nuxt is composed of web builders all over the world who like to craft beautiful user experiences with Vue.js.
|
||||
#cards
|
||||
:::home-card-item
|
||||
:::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
|
||||
:::
|
||||
:::home-card-item
|
||||
:::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
|
||||
:::
|
||||
:::home-card-item
|
||||
:::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
|
||||
:::
|
||||
:::home-card-item
|
||||
:::card-item
|
||||
---
|
||||
icon: 'fa-brands:twitter'
|
||||
to: 'https://twitter.com/nuxt_js'
|
||||
titleClass: 'text-5xl font-semibold u-text-gray-900'
|
||||
---
|
||||
#title
|
||||
76k
|
||||
@ -265,14 +281,14 @@ A solution to cover [all your needs]{.text-transparent .bg-clip-text .bg-gradien
|
||||
#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
|
||||
:::home-card-item
|
||||
:::card-item
|
||||
---
|
||||
headerClass: 'justify-start px-4 pt-4 sm:px-6'
|
||||
image:
|
||||
light: 'needs-official-agency-light.png'
|
||||
dark: 'needs-official-agency.png'
|
||||
imageHeight: '58'
|
||||
imageWidth: '52'
|
||||
path: '/assets/home/needs-official-agency'
|
||||
width: '52'
|
||||
height: '58'
|
||||
format: 'png'
|
||||
contentClass: 'gap-y-2'
|
||||
to: '/support/agencies'
|
||||
---
|
||||
@ -281,14 +297,14 @@ Developers deserve solutions as well designed as non-technical people. Our focus
|
||||
#description
|
||||
A carefully built network of trusted agencies from all over the world!
|
||||
:::
|
||||
:::home-card-item
|
||||
:::card-item
|
||||
---
|
||||
headerClass: 'justify-start px-4 pt-4 sm:px-6'
|
||||
image:
|
||||
light: 'needs-nuxt-expert-light.png'
|
||||
dark: 'needs-nuxt-expert.png'
|
||||
imageHeight: '58'
|
||||
imageWidth: '52'
|
||||
path: '/assets/home/needs-nuxt-expert'
|
||||
width: '52'
|
||||
height: '58'
|
||||
format: 'png'
|
||||
contentClass: 'gap-y-2'
|
||||
to: '/support/solutions'
|
||||
---
|
||||
@ -297,15 +313,15 @@ Developers deserve solutions as well designed as non-technical people. Our focus
|
||||
#description
|
||||
A network of freelance from all over the world, certified by the NuxtLabs team !
|
||||
:::
|
||||
:::home-card-item
|
||||
:::card-item
|
||||
---
|
||||
headerClass: 'justify-start px-4 pt-4 sm:px-6'
|
||||
contentClass: 'gap-y-2'
|
||||
image:
|
||||
light: 'needs-community-support-light.png'
|
||||
dark: 'needs-community-support.png'
|
||||
imageHeight: '58'
|
||||
imageWidth: '52'
|
||||
path: '/assets/home/needs-community-support'
|
||||
width: '52'
|
||||
height: '58'
|
||||
format: 'png'
|
||||
to: '/support/solutions'
|
||||
---
|
||||
#title
|
||||
|
||||
@ -12,26 +12,27 @@ Nuxt Docs
|
||||
Nuxt is an open-source framework under MIT license for building modern and performant web applications that can be deployed on any platform running JavaScript.
|
||||
::
|
||||
|
||||
::docs-card
|
||||
::card-item
|
||||
---
|
||||
component: 'div'
|
||||
is: 'div'
|
||||
gradientBorder: false
|
||||
descriptionClass: 'w-full sm:w-2/3'
|
||||
roundedClass: 'rounded-xl'
|
||||
image:
|
||||
backgroundImage:
|
||||
path: '/assets/docs/getting-started/views/getting-started'
|
||||
width: '100'
|
||||
height: '100'
|
||||
format: 'png'
|
||||
buttons:
|
||||
- label: 'Get started'
|
||||
size: 'xl'
|
||||
size: 'sm'
|
||||
variant: 'primary-gradient'
|
||||
to: '/docs/getting-started/introduction'
|
||||
- label: 'Explore Examples'
|
||||
size: 'xl'
|
||||
size: 'sm'
|
||||
variant: 'secondary'
|
||||
to: '/docs/examples/essentials/hello-world'
|
||||
---
|
||||
#extraTitle
|
||||
#title
|
||||
Getting Started
|
||||
#description
|
||||
Start by learning Nuxt core features, from installation to deployment.
|
||||
@ -45,15 +46,16 @@ Guide
|
||||
#description
|
||||
From an idea to a masterpiece, guides take you on the path to becoming a Nuxter.
|
||||
#extra
|
||||
::docs-landing-list
|
||||
:::docs-landing-card
|
||||
::card-list
|
||||
:::card-item
|
||||
---
|
||||
gradientBorder: false
|
||||
headerClass: 'justify-start px-4 pt-4 sm:px-6'
|
||||
image:
|
||||
light: '/assets/docs/getting-started/views/docs-landing/key-concepts-light.svg'
|
||||
dark: '/assets/docs/getting-started/views/docs-landing/key-concepts-dark.svg'
|
||||
imageHeight: '58'
|
||||
imageWidth: '52'
|
||||
path: '/assets/docs/getting-started/views/docs-landing/key-concepts'
|
||||
width: '52'
|
||||
height: '58'
|
||||
format: 'svg'
|
||||
contentClass: 'gap-y-2'
|
||||
to: '/docs/guide/concepts/auto-imports'
|
||||
---
|
||||
@ -62,14 +64,15 @@ From an idea to a masterpiece, guides take you on the path to becoming a Nuxter.
|
||||
#description
|
||||
Get an overview of the concepts that drive the Nuxt experience.
|
||||
:::
|
||||
:::docs-landing-card
|
||||
:::card-item
|
||||
---
|
||||
gradientBorder: false
|
||||
headerClass: 'justify-start px-4 pt-4 sm:px-6'
|
||||
image:
|
||||
light: '/assets/docs/getting-started/views/docs-landing/directory-structure-light.svg'
|
||||
dark: '/assets/docs/getting-started/views/docs-landing/directory-structure-dark.svg'
|
||||
imageHeight: '58'
|
||||
imageWidth: '52'
|
||||
path: '/assets/docs/getting-started/views/docs-landing/directory-structure'
|
||||
width: '52'
|
||||
height: '58'
|
||||
format: 'svg'
|
||||
contentClass: 'gap-y-2'
|
||||
to: '/docs/guide/directory-structure/nuxt'
|
||||
---
|
||||
@ -78,14 +81,15 @@ From an idea to a masterpiece, guides take you on the path to becoming a Nuxter.
|
||||
#description
|
||||
Navigate Nuxt directory structure with this handy guide.
|
||||
:::
|
||||
:::docs-landing-card
|
||||
:::card-item
|
||||
---
|
||||
gradientBorder: false
|
||||
headerClass: 'justify-start px-4 pt-4 sm:px-6'
|
||||
image:
|
||||
light: '/assets/docs/getting-started/views/docs-landing/going-further-light.svg'
|
||||
dark: '/assets/docs/getting-started/views/docs-landing/going-further-dark.svg'
|
||||
imageHeight: '58'
|
||||
imageWidth: '52'
|
||||
path: '/assets/docs/getting-started/views/docs-landing/going-further'
|
||||
width: '52'
|
||||
height: '58'
|
||||
format: 'svg'
|
||||
contentClass: 'gap-y-2'
|
||||
to: '/docs/guide/going-further/internals'
|
||||
---
|
||||
@ -103,15 +107,16 @@ API
|
||||
#description
|
||||
Every Nuxt components, composables and utilities, in details.
|
||||
#extra
|
||||
::docs-landing-list
|
||||
:::docs-landing-card
|
||||
::card-list
|
||||
:::card-item
|
||||
---
|
||||
gradientBorder: false
|
||||
headerClass: 'justify-start px-4 pt-4 sm:px-6'
|
||||
image:
|
||||
light: '/assets/docs/getting-started/views/docs-landing/composables-light.svg'
|
||||
dark: '/assets/docs/getting-started/views/docs-landing/composables-dark.svg'
|
||||
imageHeight: '58'
|
||||
imageWidth: '52'
|
||||
path: '/assets/docs/getting-started/views/docs-landing/composables'
|
||||
width: '52'
|
||||
height: '58'
|
||||
format: 'svg'
|
||||
contentClass: 'gap-y-2'
|
||||
to: '/docs/api/composables/use-app-config'
|
||||
---
|
||||
@ -120,14 +125,15 @@ Every Nuxt components, composables and utilities, in details.
|
||||
#description
|
||||
From data fetching to error handling, get familiar with Nuxt built-in composables.
|
||||
:::
|
||||
:::docs-landing-card
|
||||
:::card-item
|
||||
---
|
||||
gradientBorder: false
|
||||
headerClass: 'justify-start px-4 pt-4 sm:px-6'
|
||||
image:
|
||||
light: '/assets/docs/getting-started/views/docs-landing/components-light.svg'
|
||||
dark: '/assets/docs/getting-started/views/docs-landing/components-dark.svg'
|
||||
imageHeight: '58'
|
||||
imageWidth: '52'
|
||||
path: '/assets/docs/getting-started/views/docs-landing/components'
|
||||
width: '52'
|
||||
height: '58'
|
||||
format: 'svg'
|
||||
contentClass: 'gap-y-2'
|
||||
to: '/docs/api/components/client-only'
|
||||
---
|
||||
@ -136,14 +142,15 @@ Every Nuxt components, composables and utilities, in details.
|
||||
#description
|
||||
Nuxt components, auto-imported and ready to use in your application.
|
||||
:::
|
||||
:::docs-landing-card
|
||||
:::card-item
|
||||
---
|
||||
gradientBorder: false
|
||||
headerClass: 'justify-start px-4 pt-4 sm:px-6'
|
||||
image:
|
||||
light: '/assets/docs/getting-started/views/docs-landing/utils-light.svg'
|
||||
dark: '/assets/docs/getting-started/views/docs-landing/utils-dark.svg'
|
||||
imageHeight: '58'
|
||||
imageWidth: '52'
|
||||
path: '/assets/docs/getting-started/views/docs-landing/utils'
|
||||
width: '52'
|
||||
height: '58'
|
||||
format: 'svg'
|
||||
contentClass: 'gap-y-2'
|
||||
to: '/docs/api/utils/dollarfetch'
|
||||
---
|
||||
@ -152,14 +159,15 @@ Every Nuxt components, composables and utilities, in details.
|
||||
#description
|
||||
Use utility functions to get fine-grained control over your app behavior.
|
||||
:::
|
||||
:::docs-landing-card
|
||||
:::card-item
|
||||
---
|
||||
gradientBorder: false
|
||||
headerClass: 'justify-start px-4 pt-4 sm:px-6'
|
||||
image:
|
||||
light: '/assets/docs/getting-started/views/docs-landing/advanced-light.svg'
|
||||
dark: '/assets/docs/getting-started/views/docs-landing/advanced-dark.svg'
|
||||
imageHeight: '58'
|
||||
imageWidth: '52'
|
||||
path: '/assets/docs/getting-started/views/docs-landing/advanced'
|
||||
width: '52'
|
||||
height: '58'
|
||||
format: 'svg'
|
||||
contentClass: 'gap-y-2'
|
||||
to: '/docs/api/advanced/hooks'
|
||||
---
|
||||
@ -168,14 +176,15 @@ Every Nuxt components, composables and utilities, in details.
|
||||
#description
|
||||
Learn about lifecycle hooks and Kit utilities in the advanced section.
|
||||
:::
|
||||
:::docs-landing-card
|
||||
:::card-item
|
||||
---
|
||||
gradientBorder: false
|
||||
headerClass: 'justify-start px-4 pt-4 sm:px-6'
|
||||
image:
|
||||
light: '/assets/docs/getting-started/views/docs-landing/commands-light.svg'
|
||||
dark: '/assets/docs/getting-started/views/docs-landing/commands-dark.svg'
|
||||
imageHeight: '58'
|
||||
imageWidth: '52'
|
||||
path: '/assets/docs/getting-started/views/docs-landing/commands'
|
||||
width: '52'
|
||||
height: '58'
|
||||
format: 'svg'
|
||||
contentClass: 'gap-y-2'
|
||||
to: '/docs/api/commands/add'
|
||||
---
|
||||
@ -184,14 +193,15 @@ Every Nuxt components, composables and utilities, in details.
|
||||
#description
|
||||
Meet Nuxi, Nuxt 3 command-line tool. The essential companion in your journey.
|
||||
:::
|
||||
:::docs-landing-card
|
||||
:::card-item
|
||||
---
|
||||
gradientBorder: false
|
||||
headerClass: 'justify-start px-4 pt-4 sm:px-6'
|
||||
image:
|
||||
light: '/assets/docs/getting-started/views/docs-landing/configuration-light.svg'
|
||||
dark: '/assets/docs/getting-started/views/docs-landing/configuration-dark.svg'
|
||||
imageHeight: '58'
|
||||
imageWidth: '52'
|
||||
path: '/assets/docs/getting-started/views/docs-landing/configuration'
|
||||
width: '52'
|
||||
height: '58'
|
||||
format: 'svg'
|
||||
contentClass: 'gap-y-2'
|
||||
to: '/docs/api/configuration/nuxt-config'
|
||||
---
|
||||
|
||||
@ -10,47 +10,86 @@ image:
|
||||
path: '/assets/docs/getting-started/views/hero'
|
||||
width: '129'
|
||||
height: '143'
|
||||
format: 'png'
|
||||
---
|
||||
#title
|
||||
Introduction
|
||||
#description
|
||||
Nuxt provides both frontend and backend functionality so you can focus on what matters: Creating your web application.
|
||||
Nuxt provides both frontend and backend functionality so you can focus on what matters: Creating your web application.
|
||||
::
|
||||
|
||||
## What is Nuxt?
|
||||
|
||||
To understand what Nuxt is, we need to understand what we need in order to create a modern application:
|
||||
::docs-card-list
|
||||
::docs-card
|
||||
#extraTitle
|
||||
::card-list
|
||||
---
|
||||
cardListClass: 'grid grid-cols-1 gap-y-2'
|
||||
---
|
||||
::card-item
|
||||
---
|
||||
gradientBorder: false
|
||||
contentClass: 'gap-y-2'
|
||||
bodyClass: 'p-4'
|
||||
roundedClass: 'rounded-sm'
|
||||
titleClass: 'text-base font-semibold u-text-gray-900'
|
||||
---
|
||||
#title
|
||||
JavaScript framework
|
||||
#description
|
||||
A JavaScript framework to bring reactivity and web components, we chose Vue.js.
|
||||
::
|
||||
|
||||
::docs-card
|
||||
#extraTitle
|
||||
::card-item
|
||||
---
|
||||
gradientBorder: false
|
||||
contentClass: 'gap-y-2'
|
||||
bodyClass: 'p-4'
|
||||
roundedClass: 'rounded-sm'
|
||||
titleClass: 'text-base font-semibold u-text-gray-900'
|
||||
---
|
||||
#title
|
||||
Webpack and Vite
|
||||
#description
|
||||
A bundler to support hot module replacement in development and bundle your code for production, we support both [webpack 5](https://webpack.js.org/) and [Vite](https://vitejs.dev/).
|
||||
::
|
||||
|
||||
::docs-card
|
||||
#extraTitle
|
||||
::card-item
|
||||
---
|
||||
gradientBorder: false
|
||||
contentClass: 'gap-y-2'
|
||||
bodyClass: 'p-4'
|
||||
roundedClass: 'rounded-sm'
|
||||
titleClass: 'text-base font-semibold u-text-gray-900'
|
||||
---
|
||||
#title
|
||||
Latest JavaScript syntax
|
||||
#description
|
||||
A transpiler to write the latest JavaScript syntax while supporting legacy browsers, we use [esbuild](https://esbuild.github.io) for that.
|
||||
::
|
||||
|
||||
::docs-card
|
||||
#extraTitle
|
||||
::card-item
|
||||
---
|
||||
gradientBorder: false
|
||||
contentClass: 'gap-y-2'
|
||||
bodyClass: 'p-4'
|
||||
roundedClass: 'rounded-sm'
|
||||
titleClass: 'text-base font-semibold u-text-gray-900'
|
||||
---
|
||||
#title
|
||||
Server side
|
||||
#description
|
||||
A server for serving your application in development, but also to support [server-side rendering](https://vuejs.org/api/ssr.html#server-side-rendering-api) or API routes, Nuxt uses [h3](https://github.com/unjs/h3) for deployment versatility such as serverless, workers, Node.js and unmatched performance.
|
||||
::
|
||||
|
||||
::docs-card
|
||||
#extraTitle
|
||||
::card-item
|
||||
---
|
||||
gradientBorder: false
|
||||
contentClass: 'gap-y-2'
|
||||
bodyClass: 'p-4'
|
||||
roundedClass: 'rounded-sm'
|
||||
titleClass: 'text-base font-semibold u-text-gray-900'
|
||||
---
|
||||
#title
|
||||
Routing library
|
||||
#description
|
||||
A routing library to handle client-side navigation, we chose [vue-router](https://router.vuejs.org/).
|
||||
@ -139,13 +178,19 @@ Nuxt is composed of different [core packages](https://github.com/nuxt/framework/
|
||||
|
||||
We recommend reading each concept to have a full vision of Nuxt capabilities and the scope of each package.
|
||||
|
||||
::docs-card-list
|
||||
::docs-card
|
||||
::card-list
|
||||
---
|
||||
cardListClass: 'grid grid-cols-1 gap-y-4'
|
||||
---
|
||||
:::card-item
|
||||
---
|
||||
image:
|
||||
gradientBorder: false
|
||||
backgroundImage:
|
||||
path: '/assets/docs/getting-started/views/are-you-nuxt'
|
||||
width: '72px'
|
||||
height: '92px'
|
||||
format: 'png'
|
||||
titleClass: 'text-5xl font-semibold u-text-gray-900 pb-2'
|
||||
descriptionClass: 'md:mr-[64px] w-[90%]'
|
||||
---
|
||||
#title
|
||||
@ -158,19 +203,18 @@ We recommend reading each concept to have a full vision of Nuxt capabilities and
|
||||
<br>
|
||||
<br>
|
||||
Ready to try? Head over to the [Installation section](/docs/getting-started/installation).
|
||||
:::
|
||||
|
||||
::
|
||||
|
||||
::docs-landing-card{.mb-8}
|
||||
:::card-item
|
||||
---
|
||||
image:
|
||||
dark: '/assets/docs/getting-started/views/contribute-dark.png'
|
||||
light: '/assets/docs/getting-started/views/contribute-light.png'
|
||||
imageWidth: '72'
|
||||
imageHeight: '92'
|
||||
fontSizeClass: 'text-2xl'
|
||||
gradientBorder: false
|
||||
backgroundImage:
|
||||
path: '/assets/docs/getting-started/views/contribute'
|
||||
width: '72'
|
||||
height: '92'
|
||||
format: 'png'
|
||||
titleClass: 'text-2xl u-text-gray-900 font-semibold'
|
||||
descriptionClass: 'md:mr-[64px]'
|
||||
imageClass: "right-0 bottom-0 absolute"
|
||||
---
|
||||
#title
|
||||
Contribute
|
||||
@ -178,5 +222,5 @@ We recommend reading each concept to have a full vision of Nuxt capabilities and
|
||||
Do you want to get involved in the evolution of Nuxt?
|
||||
<br>
|
||||
Follow the [contribution guide](/docs/community/contribution).
|
||||
::
|
||||
:::
|
||||
::
|
||||
|
||||
@ -10,6 +10,7 @@ image:
|
||||
path: '/assets/docs/getting-started/nuxt-community/nuxt-community'
|
||||
width: '437'
|
||||
height: '236'
|
||||
format: 'png'
|
||||
---
|
||||
#title
|
||||
Nuxt Community
|
||||
@ -23,50 +24,75 @@ The journey of an [Open Source Project]{.text-transparent .bg-clip-text .bg-grad
|
||||
#description
|
||||
The development of Nuxt and its ecosystem is led by an international team. Our committed team and community work every day to move Nuxt forward.
|
||||
#extra
|
||||
::docs-card{.dark:bg-gray-900}
|
||||
::docs-community-journey-section{.dark:bg-gray-900}
|
||||
---
|
||||
fontSizeClass: 'text-2xl'
|
||||
---
|
||||
#extraTitle
|
||||
Since the creation of Nuxt 3
|
||||
::stat-card-list
|
||||
::card-list
|
||||
---
|
||||
gridClass: 'lg:grid-cols-4'
|
||||
backgroundImg:
|
||||
cardListClass: 'grid grid-cols-1 gap-1 sm:gap-8 sm:grid-cols-2 lg:grid-cols-4 border-gray-200 dark:border-gray-800 rounded-xl'
|
||||
backgroundImage:
|
||||
path: '/assets/docs/getting-started/nuxt-community/map-nuxters'
|
||||
width: "800"
|
||||
height: ""
|
||||
width: '582'
|
||||
height: '187'
|
||||
format: 'png'
|
||||
---
|
||||
:::stat-card-item
|
||||
:::card-item
|
||||
---
|
||||
descriptionClass: 'text-lg font-medium'
|
||||
contentClass: ''
|
||||
ringClass: ''
|
||||
gradientBorder: false
|
||||
titleClass: 'text-3xl font-semibold sm:text-5xl u-text-gray-900 mb-2 mt-2'
|
||||
descriptionClass: 'u-text-gray-500 text-lg font-medium'
|
||||
bodyClass: 'p-2.5 sm:p-4'
|
||||
backgroundClass: 'bg-transparent'
|
||||
---
|
||||
#title
|
||||
50M
|
||||
#description
|
||||
npm downloads
|
||||
:::
|
||||
:::stat-card-item
|
||||
:::card-item
|
||||
---
|
||||
descriptionClass: 'text-lg font-medium'
|
||||
contentClass: ''
|
||||
ringClass: ''
|
||||
gradientBorder: false
|
||||
titleClass: 'text-3xl font-semibold sm:text-5xl u-text-gray-900 mb-2 mt-2'
|
||||
descriptionClass: 'u-text-gray-500 text-lg font-medium'
|
||||
bodyClass: 'p-2.5 sm:p-4'
|
||||
backgroundClass: 'bg-transparent'
|
||||
---
|
||||
#title
|
||||
10,6K
|
||||
#description
|
||||
Stars
|
||||
:::
|
||||
:::stat-card-item
|
||||
:::card-item
|
||||
---
|
||||
descriptionClass: 'text-lg font-medium'
|
||||
contentClass: ''
|
||||
ringClass: ''
|
||||
gradientBorder: false
|
||||
titleClass: 'text-3xl font-semibold sm:text-5xl u-text-gray-900 mb-2 mt-2'
|
||||
descriptionClass: 'u-text-gray-500 text-lg font-medium'
|
||||
bodyClass: 'p-2.5 sm:p-4'
|
||||
backgroundClass: 'bg-transparent'
|
||||
---
|
||||
#title
|
||||
330
|
||||
#description
|
||||
Contributors
|
||||
:::
|
||||
:::stat-card-item
|
||||
:::card-item
|
||||
---
|
||||
descriptionClass: 'text-lg font-medium'
|
||||
contentClass: ''
|
||||
ringClass: ''
|
||||
gradientBorder: false
|
||||
titleClass: 'text-3xl font-semibold sm:text-5xl u-text-gray-900 mb-2 mt-2'
|
||||
descriptionClass: 'u-text-gray-500 text-lg font-medium'
|
||||
bodyClass: 'p-2.5 sm:p-4'
|
||||
backgroundClass: 'bg-transparent'
|
||||
---
|
||||
#title
|
||||
998
|
||||
@ -83,7 +109,6 @@ From users to [Contributors]{.text-transparent .bg-clip-text .bg-gradient-to-r .
|
||||
#description
|
||||
From contributors to advocates, the community is made of members with different horizons and skills. We are happy to see new members every day and encourage anyone to help in any way (answering questions, giving a talk, creating modules and contributing to the core).
|
||||
#extra
|
||||
|
||||
::contributors-card
|
||||
#title
|
||||
Sharing is caring
|
||||
@ -114,59 +139,86 @@ Join the [journey]{.text-transparent .bg-clip-text .bg-gradient-to-r .from-green
|
||||
#description
|
||||
From user to contributor, these guides will help you get the best out of Nuxt.
|
||||
#extra
|
||||
::journey-card-list
|
||||
::docs-card
|
||||
::card-list
|
||||
---
|
||||
cardListClass: 'grid grid-cols-1 pt-6 gap-y-4 sm:gap-y-0 sm:grid-cols-2 border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden'
|
||||
---
|
||||
::card-item
|
||||
---
|
||||
backgroundClass: 'border dark:border-gray-700'
|
||||
roundedClass: 'sm:rounded-r-none sm:rounded-br-none sm:rounded-tl-lg'
|
||||
ringClass: 'ring-0'
|
||||
gradientBorder: false
|
||||
descriptionClass: 'w-full sm:w-2/3'
|
||||
roundedClass: 'rounded-t-lg sm:rounded-tl-lg sm:rounded-tr-none'
|
||||
image:
|
||||
backgroundImageClass: 'hidden sm:block absolute bottom-0 right-0'
|
||||
backgroundImage:
|
||||
path: '/assets/docs/getting-started/nuxt-community/community-contribute'
|
||||
width: '88'
|
||||
height: '88'
|
||||
format: 'png'
|
||||
titleClass: 'text-base font-semibold u-text-gray-900'
|
||||
---
|
||||
#extraTitle
|
||||
#title
|
||||
[How to contribute?](/docs/community/contribution)
|
||||
#description
|
||||
Nuxt is a community project - and so we love contributions of all kinds! ❤️
|
||||
::
|
||||
::docs-card
|
||||
::card-item
|
||||
---
|
||||
backgroundClass: 'border dark:border-gray-700'
|
||||
roundedClass: 'sm:rounded-l-none sm:rounded-br-none sm:rounded-tr-lg'
|
||||
ringClass: 'ring-0'
|
||||
gradientBorder: false
|
||||
descriptionClass: 'w-full sm:w-2/3'
|
||||
roundedClass: 'sm:rounded-tr-lg'
|
||||
image:
|
||||
backgroundImageClass: 'hidden sm:block absolute bottom-0 right-0'
|
||||
backgroundImage:
|
||||
path: '/assets/docs/getting-started/nuxt-community/roadmap'
|
||||
width: '88'
|
||||
height: '88'
|
||||
format: 'png'
|
||||
titleClass: 'text-base font-semibold u-text-gray-900'
|
||||
---
|
||||
#extraTitle
|
||||
#title
|
||||
[Discover our roadmap](/docs/community/roadmap)
|
||||
#description
|
||||
Nuxt is constantly evolving, with new features and modules being added all the time.
|
||||
::
|
||||
::docs-card
|
||||
::card-item
|
||||
---
|
||||
backgroundClass: 'border dark:border-gray-700'
|
||||
ringClass: 'ring-0'
|
||||
roundedClass: 'sm:rounded-tl-none sm:rounded-r-none sm:rounded-bl-lg'
|
||||
gradientBorder: false
|
||||
descriptionClass: 'w-full sm:w-2/3'
|
||||
roundedClass: 'sm:rounded-bl-lg'
|
||||
image:
|
||||
backgroundImageClass: 'hidden sm:block absolute bottom-0 right-0'
|
||||
backgroundImage:
|
||||
path: '/assets/docs/getting-started/nuxt-community/bugs'
|
||||
width: '88'
|
||||
height: '88'
|
||||
format: 'png'
|
||||
titleClass: 'text-base font-semibold u-text-gray-900'
|
||||
---
|
||||
#extraTitle
|
||||
#title
|
||||
[Reporting Bugs](/docs/community/reporting-bugs)
|
||||
#description
|
||||
One of the most valuable roles in open source is taking the time to report bugs helpfully.
|
||||
::
|
||||
::docs-card
|
||||
::card-item
|
||||
---
|
||||
backgroundClass: 'border dark:border-gray-700'
|
||||
ringClass: 'ring-0'
|
||||
roundedClass: 'sm:rounded-l-none sm:rounded-br-lg sm:rounded-tr-none'
|
||||
gradientBorder: false
|
||||
descriptionClass: 'w-full sm:w-2/3'
|
||||
roundedClass: 'rounded-b-lg sm:rounded-br-lg sm:rounded-bl-none'
|
||||
image:
|
||||
backgroundImageClass: 'hidden sm:block absolute bottom-0 right-0'
|
||||
backgroundImage:
|
||||
path: '/assets/docs/getting-started/nuxt-community/help'
|
||||
width: '88'
|
||||
height: '88'
|
||||
format: 'png'
|
||||
titleClass: 'text-base font-semibold u-text-gray-900'
|
||||
---
|
||||
#extraTitle
|
||||
#title
|
||||
[Getting Help](/docs/community/getting-help)
|
||||
#description
|
||||
We're a friendly community of developers and we'd love to help you!
|
||||
|
||||
@ -8,7 +8,7 @@ image: '/socials/modules.jpg'
|
||||
::page-hero
|
||||
---
|
||||
image:
|
||||
src: '/assets/modules/hero'
|
||||
path: '/assets/modules/hero'
|
||||
format: 'webp'
|
||||
height: '216'
|
||||
width: '400'
|
||||
|
||||
@ -8,7 +8,7 @@ image: '/socials/showcase.jpg'
|
||||
::page-hero
|
||||
---
|
||||
image:
|
||||
src: '/assets/showcase/hero'
|
||||
path: '/assets/showcase/hero'
|
||||
format: 'webp'
|
||||
height: '216'
|
||||
width: '400'
|
||||
|
||||
@ -7,7 +7,7 @@ image: '/socials/support.jpg'
|
||||
::page-hero
|
||||
---
|
||||
image:
|
||||
src: '/assets/support/solutions/hero'
|
||||
path: '/assets/support/solutions/hero'
|
||||
format: 'webp'
|
||||
height: '216'
|
||||
width: '400'
|
||||
@ -20,7 +20,11 @@ Discover the different support offers to answer your questions, get an audit, co
|
||||
|
||||
::support-section
|
||||
---
|
||||
image: 'agency'
|
||||
image:
|
||||
path: 'agency'
|
||||
width: '73'
|
||||
height: '81'
|
||||
format: 'webp'
|
||||
to: '/support/agencies'
|
||||
---
|
||||
#title
|
||||
@ -36,7 +40,11 @@ If you have any question, we will gladly help you refine your needs and help you
|
||||
|
||||
::support-section
|
||||
---
|
||||
image: 'experts'
|
||||
image:
|
||||
path: 'experts'
|
||||
width: '73'
|
||||
height: '81'
|
||||
format: 'webp'
|
||||
---
|
||||
#title
|
||||
Nuxt Experts
|
||||
@ -58,7 +66,11 @@ They act as an external workforce for Nuxtlabs and are qualified to take on any
|
||||
|
||||
::support-section
|
||||
---
|
||||
image: 'community'
|
||||
image:
|
||||
path: 'community'
|
||||
width: '73'
|
||||
height: '81'
|
||||
format: 'webp'
|
||||
---
|
||||
#title
|
||||
Community Support
|
||||
|
||||
@ -6,7 +6,7 @@ head.titleTemplate: '%s'
|
||||
::page-hero
|
||||
---
|
||||
image:
|
||||
src: '/assets/support/agencies/hero'
|
||||
path: '/assets/support/agencies/hero'
|
||||
format: 'svg'
|
||||
height: '216'
|
||||
width: '400'
|
||||
|
||||
@ -7,7 +7,7 @@ image: '/socials/sponsors.jpg'
|
||||
::page-hero
|
||||
---
|
||||
image:
|
||||
src: '/assets/support/sponsors/hero'
|
||||
path: '/assets/support/sponsors/hero'
|
||||
format: 'webp'
|
||||
height: '216'
|
||||
width: '400'
|
||||
|
||||
@ -7,7 +7,7 @@ image: '/socials/jobs.jpg'
|
||||
::page-hero
|
||||
---
|
||||
image:
|
||||
src: '/assets/support/jobs/hero'
|
||||
path: '/assets/support/jobs/hero'
|
||||
format: 'webp'
|
||||
height: '216'
|
||||
width: '400'
|
||||
|
||||
@ -7,7 +7,7 @@ image: '/socials/design-kit.jpg'
|
||||
::page-hero
|
||||
---
|
||||
image:
|
||||
src: '/assets/design-kit/hero-designkit'
|
||||
path: '/assets/design-kit/hero-designkit'
|
||||
format: 'webp'
|
||||
height: '216'
|
||||
width: '400'
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
"devDependencies": {
|
||||
"jiti": "^1.16.1",
|
||||
"nuxt": "^3.0.0",
|
||||
"nuxt-website-theme": "^0.2.4",
|
||||
"nuxt-website-theme": "^0.2.5",
|
||||
"pathe": "^1.0.0",
|
||||
"scule": "^1.0.0",
|
||||
"untyped": "^1.2.1"
|
||||
|
||||
|
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 5.0 KiB |
|
Before Width: | Height: | Size: 9.2 KiB After Width: | Height: | Size: 9.2 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 5.3 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 5.1 KiB |
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
@ -4194,7 +4194,7 @@ __metadata:
|
||||
dependencies:
|
||||
jiti: ^1.16.1
|
||||
nuxt: ^3.0.0
|
||||
nuxt-website-theme: ^0.2.4
|
||||
nuxt-website-theme: ^0.2.5
|
||||
pathe: ^1.0.0
|
||||
scule: ^1.0.0
|
||||
untyped: ^1.2.1
|
||||
@ -8996,9 +8996,9 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"nuxt-website-theme@npm:^0.2.4":
|
||||
version: 0.2.4
|
||||
resolution: "nuxt-website-theme@npm:0.2.4"
|
||||
"nuxt-website-theme@npm:^0.2.5":
|
||||
version: 0.2.5
|
||||
resolution: "nuxt-website-theme@npm:0.2.5"
|
||||
dependencies:
|
||||
"@docsearch/css": ^3.3.0
|
||||
"@docsearch/js": ^3.3.0
|
||||
@ -9022,7 +9022,7 @@ __metadata:
|
||||
tailwindcss-border-gradient-radius: ^3.0.1
|
||||
three: ^0.147.0
|
||||
vue-lite-youtube-embed: ^1.0.4
|
||||
checksum: 3f268953cb17198a0090b4d6c1f0eb6c0e15531ad863f65597ff0aa080823018fd10c342cf7866d11ea5567821740cd44d6712947351071fb08df9221d80fcb7
|
||||
checksum: 5a5ba6b094475edbea83b0583e85bdcbc4435a2378be6e63be4f67f980071686d08c2297400c6eda7bbe9e28d95452863f897012f92cf1eed0c7c3cfe7558d3a
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user