You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Nuxtify is a collection of [Nuxt modules](https://nuxt.com/docs/guide/concepts/modules) that will help you stay organized, maintain focus, and _ship weirdly fast_.
30
+
31
+
It's built on a loosely opinionated stack that eliminates decision fatigue and ensures consistency across projects. This extensible approach gives you incredible control over your site's structure and style.
32
+
33
+
Once you add a Nuxtify module (like this one) to a new or existing Nuxt project, you can use any of the components, composables, and other features instantly – no imports necessary. And more importantly, you can override these defaults with your own version at any time.
34
+
35
+
**This unlocks a powerful way of working.**
36
+
37
+
Use the defaults when they're helpful, and progressively upgrade when they're not.
38
+
39
+
This means you can:
40
+
41
+
- Setup a new project using the default configuration in a matter of minutes.
42
+
- Use the default footer component, but completely change the navigation component.
43
+
- Change the colors of all the buttons with one line of code.
44
+
- Override the default button component with a style of your choosing.
45
+
- And much more...
46
+
47
+
In short, Nuxtify helps you build faster, iterate smarter, and maintain consistency – without sacrificing control or creativity.
48
+
49
+
## <aname="features">✨ Features</a>
7
50
8
-
My new Nuxt module for doing amazing things.
51
+
Nuxtify builds on the amazing features of [Vue](https://vuejs.org/guide/introduction), [Nuxt](https://nuxt.com/docs/getting-started/introduction), and [Vuetify](https://vuetifyjs.com/en/introduction/why-vuetify/).
- Ready to use components, page templates, sections, and layouts so you can _ship weirdly fast_
56
+
- Easily override any component with [Vuetify global defaults](https://vuetifyjs.com/en/features/global-configuration/)
57
+
- Icons powered by [Material Design Icons](https://pictogrammers.com/library/mdi/) via [Vuetify icon fonts](https://vuetifyjs.com/en/features/icon-fonts/)
58
+
- Fully responsive and adapts to all modern browsers and devices
59
+
- (coming soon) Light and dark mode toggle
15
60
16
-
<!-- Highlight some of the features your module provide here -->
61
+
### 💎 Premium DX
17
62
18
-
- ⛰ Foo
19
-
- 🚠 Bar
20
-
- 🌲 Baz
63
+
- Zero-config with sensible defaults for common use cases
64
+
- All components use the modern [Vue Composition API](https://vuejs.org/guide/extras/composition-api-faq) and [Single File Component (SFC) syntax](https://vuejs.org/guide/scaling-up/sfc.html)
65
+
-[TypeScript](https://www.typescriptlang.org/) auto-complete and type safety for all components
66
+
-[ESLint](https://eslint.org/) support out of the box using flat config (v9)
67
+
- Identify performance gaps and seamlessly manage your app with [Nuxt Devtools](https://devtools.nuxt.com/)
68
+
- Clean, elegant code that's easy to understand and customize
69
+
- Loosely opinionated, leveraging ecosystem standards so you're not locked into outdated dependencies and practices
21
70
22
-
##Quick Setup
71
+
### 🤖 Smart SEO, Security, & Performance
23
72
24
-
Install the module to your Nuxt application with one command:
73
+
- Fully tree shakeable for small bundle sizes
74
+
- Robots, sitemaps, schema.org, social share images, broken links, and more powered by [Nuxt SEO](https://nuxtseo.com/)
75
+
- Optimized caching and rendering strategies for each page with [hybrid rendering](https://nuxt.com/docs/guide/concepts/rendering#hybrid-rendering)
76
+
- (coming soon) Fast, responsive, optimized images for [20+ image providers](https://image.nuxt.com/get-started/providers) powered by [Nuxt Image](https://image.nuxt.com/)
77
+
- (coming soon) Load third-party scripts with better performance, privacy, security powered by [Nuxt Scripts](https://scripts.nuxt.com/)
78
+
- (coming soon) Optimal security patterns and principles powered by [Nuxt Security](https://nuxt.com/modules/security)
79
+
80
+
### 🌐 Host Anywhere
81
+
82
+
- Deploy to any Node.js server, static host, or serverless edge CDN environment with [20+ hosting providers](https://nuxt.com/deploy) supported
83
+
84
+
## <aname="quick-start">🚀 Quick Start</a>
85
+
86
+
To use this module in your [new](https://nuxt.com/docs/getting-started/installation) or existing Nuxt project:
87
+
88
+
### 1. Install the module
89
+
90
+
Install the module in your Nuxt application with one command:
25
91
26
92
```bash
27
-
npx nuxi module add @nuxtify/pages
93
+
npx nuxi@latest module add @nuxtify/pages
28
94
```
29
95
30
-
That's it! You can now use @nuxtify/pages in your Nuxt app ✨
96
+
### 2. Update Nuxt config
97
+
98
+
Add the `@nuxtify/pages` module to `nuxt.config.ts` and configure it:
99
+
100
+
```ts
101
+
// nuxt.config.ts
102
+
103
+
exportdefaultdefineNuxtConfig({
104
+
modules: [
105
+
'@nuxtify/pages'
106
+
],
107
+
nuxtify: {
108
+
/* module specific options */
109
+
}
110
+
});
111
+
```
112
+
113
+
Read the [📖 documentation](https://nuxtify.dev/docs) for a complete guide on how to configure and use this module.
114
+
115
+
### 3. Start building!
31
116
32
-
## Contribution
117
+
Develop and [deploy](https://nuxt.com/docs/getting-started/deployment) your Nuxt app like any other.
118
+
119
+
## <aname="configuration">🔧 Configuration</a>
120
+
121
+
### Module configuration
122
+
123
+
To see the full config, check out the [types](https://github.com/nuxtifydev/pages/blob/main/src/types.ts).
124
+
125
+
### Overriding the defaults
126
+
127
+
Nuxtify comes pre-configured with sensible defaults. Both for how the module functions and for the corresponding Nuxt [directory](https://nuxt.com/docs/guide/directory-structure).
128
+
129
+
If you need to override a [component](https://nuxt.com/docs/guide/directory-structure/components), [page](https://nuxt.com/docs/guide/directory-structure/pages), or [layout](https://nuxt.com/docs/guide/directory-structure/layouts), create the a file of the same name in your project (in the appropriate directory).
130
+
131
+
If you need to override a [composable](https://nuxt.com/docs/guide/directory-structure/composables) or [utils](https://nuxt.com/docs/guide/directory-structure/utils) utility function, create a function of the same name in your project (in the appropriate directory).
132
+
133
+
## <aname="updates">✅ Updates</a>
134
+
135
+
[✨ Release Notes](/CHANGELOG.md)
136
+
137
+
It's easy to stay up to date with the latest version of Nuxtify. Just update to the latest package from your favorite package manager.
138
+
139
+
**Minor and patch versions**
140
+
```bash
141
+
npm update @nuxtify/pages --save
142
+
```
143
+
144
+
**Major versions**
145
+
```bash
146
+
npm install @nuxtify/pages@latest --save
147
+
```
148
+
149
+
## <aname="contributing">❤️ Contributing</a>
150
+
151
+
I invite you to contribute and help improve Nuxtify!
152
+
153
+
Here are a few ways you can get involved:
154
+
155
+
-**Reporting Bugs:** If you come across any bugs or issues, please [open a new issue](https://github.com/nuxtifydev/pages/issues/new).
156
+
-**Suggestions:** Have ideas to enhance Nuxtify? I'd love to hear them! You can [open a new issue](https://github.com/nuxtifydev/pages/issues/new) describing your feature request or suggestion.
157
+
-**Local Development:** contribute directly to the framework with a pull request. Just follow the instructions below.
158
+
159
+
## <aname="local-development">🏠 Local Development</a>
33
160
34
161
<details>
35
-
<summary>Local development</summary>
162
+
<summary>CLI commands</summary>
36
163
37
164
```bash
38
165
# Install dependencies
@@ -60,6 +187,12 @@ That's it! You can now use @nuxtify/pages in your Nuxt app ✨
60
187
61
188
</details>
62
189
190
+
Learn about [authoring Nuxt modules](https://nuxt.com/docs/guide/going-further/modules).
0 commit comments