|
| 1 | +<div align=center> |
| 2 | + <img src="./nuxtify-banner.png"/> |
| 3 | +</div> |
| 4 | + |
| 5 | +# Nuxtify App |
| 6 | + |
| 7 | +<!-- |
| 8 | +[![npm downloads][npm-downloads-src]][npm-downloads-href] |
| 9 | +[![Nuxtify Docs][nuxtify-src]][nuxtify-href] --> |
| 10 | + |
| 11 | +[![npm version][npm-version-src]][npm-version-href] |
| 12 | +[![License][license-src]][license-href] |
| 13 | +[![🏀 Playground][playground-src]][playground-href] |
| 14 | + |
| 15 | +> [!NOTE] |
| 16 | +> |
| 17 | +> **Early Access Preview:** |
| 18 | +> This module is under active development. While it is already used to power a [handful of sites](https://nuxtify.dev/showcase) in production, expect things to change frequently. I will do my best to call out breaking changes in the [changelog](https://github.com/nuxtify-dev/app/blob/main/CHANGELOG.md). |
| 19 | +
|
| 20 | +### Table of Contents |
| 21 | + |
| 22 | +- ♾️ [Why Nuxtify?](#why-nuxtify) |
| 23 | +- 🧩 [Nuxtify Modules](#modules) |
| 24 | +- ✨ [Features](#features) |
| 25 | +- 🚀 [Quick Start](#quick-start) |
| 26 | +- 🔧 [Configuration](#configuration) |
| 27 | +- ✅ [Updates](#updates) |
| 28 | +- ❤️ [Contributing](#contributing) |
| 29 | +- 🏠 [Local Development](#local-development) |
| 30 | +- ⚖️ [License](#license) |
| 31 | + |
| 32 | +## <a name="why-nuxtify">♾️ Why Nuxtify?</a> |
| 33 | + |
| 34 | +Nuxtify is a collection of [Nuxt modules](https://nuxt.com/docs/guide/concepts/modules) that help you stay organized, maintain focus, and _ship weirdly fast_. |
| 35 | + |
| 36 | +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. |
| 37 | + |
| 38 | +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. |
| 39 | + |
| 40 | +**This unlocks a powerful way of working.** |
| 41 | + |
| 42 | +Use the defaults when they're helpful, and progressively upgrade when they're not. |
| 43 | + |
| 44 | +This means you can: |
| 45 | + |
| 46 | +- Setup a new project using the default configuration in a matter of minutes. |
| 47 | +- Use the default footer component, but completely change the navigation component. |
| 48 | +- Change the colors of all the buttons with one line of code. |
| 49 | +- Override the default button component with a style of your choosing. |
| 50 | +- And much more... |
| 51 | + |
| 52 | +In short, Nuxtify helps you build faster, iterate smarter, and maintain consistency – without sacrificing control or creativity. |
| 53 | + |
| 54 | +## <a name="modules">🧩 Modules</a> |
| 55 | + |
| 56 | +### [Nuxtify Core](https://github.com/nuxtify-dev/core) (this module) |
| 57 | + |
| 58 | +Provides the core functionality for Nuxtify, including: |
| 59 | + |
| 60 | +- Default components, composables, and utilities |
| 61 | +- Global configuration and theming with [Vuetify](https://vuetifyjs.com/en/introduction/why-vuetify/) |
| 62 | + |
| 63 | +### [Nuxtify Pages](https://github.com/nuxtify-dev/pages) |
| 64 | + |
| 65 | +Provides single and multi-page website building blocks so you can _ship weirdly fast_. |
| 66 | + |
| 67 | +- Ready to use page components, page templates, and email subscribe form |
| 68 | +- (coming soon) Robots, sitemaps, schema.org, social share images, broken links, and more powered by [Nuxt SEO](https://nuxtseo.com/) |
| 69 | + |
| 70 | +## <a name="features">✨ Features</a> |
| 71 | + |
| 72 | +Nuxtify Core 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/). |
| 73 | + |
| 74 | +### 💡 Intuitive UI & UX |
| 75 | + |
| 76 | +- Easily override any component with [Vuetify global defaults](https://vuetifyjs.com/en/features/global-configuration/) |
| 77 | +- Icons powered by [Material Design Icons](https://pictogrammers.com/library/mdi/) via [Vuetify icon fonts](https://vuetifyjs.com/en/features/icon-fonts/) |
| 78 | +- Fully responsive and adapts to all modern browsers and devices |
| 79 | +- (coming soon) Light and dark mode toggle |
| 80 | + |
| 81 | +### 💎 Premium DX |
| 82 | + |
| 83 | +- Zero-config with sensible defaults for common use cases |
| 84 | +- 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) |
| 85 | +- [TypeScript](https://www.typescriptlang.org/) auto-complete and type safety for all components |
| 86 | +- [ESLint](https://eslint.org/) support out of the box using flat config (v9) |
| 87 | +- Identify performance gaps and seamlessly manage your app with [Nuxt Devtools](https://devtools.nuxt.com/) |
| 88 | +- Clean, elegant code that's easy to understand and customize |
| 89 | +- Loosely opinionated, leveraging ecosystem standards so you're not locked into outdated dependencies and practices |
| 90 | + |
| 91 | +### 🤖 Security & Performance |
| 92 | + |
| 93 | +- Fully tree shakeable for small bundle sizes |
| 94 | +- Optimized caching and rendering strategies for each page with [hybrid rendering](https://nuxt.com/docs/guide/concepts/rendering#hybrid-rendering) |
| 95 | +- (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/) |
| 96 | +- (coming soon) Load third-party scripts with better performance, privacy, security powered by [Nuxt Scripts](https://scripts.nuxt.com/) |
| 97 | +- (coming soon) Optimal security patterns and principles powered by [Nuxt Security](https://nuxt.com/modules/security) |
| 98 | + |
| 99 | +### 🌐 Host Anywhere |
| 100 | + |
| 101 | +- Deploy to any Node.js server, static host, or serverless edge CDN environment with [20+ hosting providers](https://nuxt.com/deploy) supported |
| 102 | + |
| 103 | +## <a name="quick-start">🚀 Quick Start</a> |
| 104 | + |
| 105 | +To use this module in your [new](https://nuxt.com/docs/getting-started/installation) or existing Nuxt project: |
| 106 | + |
| 107 | +### 1. Install the module |
| 108 | + |
| 109 | +Install the module in your Nuxt application with one command: |
| 110 | + |
| 111 | +```bash |
| 112 | +npx nuxi@latest module add @nuxtify/core |
| 113 | +``` |
| 114 | + |
| 115 | +### 2. Update Nuxt config |
| 116 | + |
| 117 | +Add the `@nuxtify/core` module to `nuxt.config.ts` and configure it: |
| 118 | + |
| 119 | +```ts |
| 120 | +// nuxt.config.ts |
| 121 | + |
| 122 | +export default defineNuxtConfig({ |
| 123 | + modules: ["@nuxtify/core"], |
| 124 | + nuxtifyCore: { |
| 125 | + /* module specific options */ |
| 126 | + }, |
| 127 | +}); |
| 128 | +``` |
| 129 | + |
| 130 | +Read the [📖 documentation](https://nuxtify.dev/docs) for a complete guide on how to configure and use this module. |
| 131 | + |
| 132 | +### 3. Start building! |
| 133 | + |
| 134 | +Develop and [deploy](https://nuxt.com/docs/getting-started/deployment) your Nuxt app like any other. |
| 135 | + |
| 136 | +## <a name="configuration">🔧 Configuration</a> |
| 137 | + |
| 138 | +### Module configuration |
| 139 | + |
| 140 | +To see the full config, check out the [types](https://github.com/nuxtify-dev/core/blob/main/src/types.ts). |
| 141 | + |
| 142 | +### Overriding the defaults |
| 143 | + |
| 144 | +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). |
| 145 | + |
| 146 | +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 with the same name in your project (in the appropriate directory). |
| 147 | + |
| 148 | +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 with the same name in your project (in the appropriate directory). |
| 149 | + |
| 150 | +## <a name="updates">✅ Updates</a> |
| 151 | + |
| 152 | +[✨ Release Notes](/CHANGELOG.md) |
| 153 | + |
| 154 | +It's easy to stay up to date with the latest version of Nuxtify. Just update to the latest package using your favorite package manager. |
| 155 | + |
| 156 | +**Minor and patch versions** |
| 157 | + |
| 158 | +```bash |
| 159 | +npm update @nuxtify/core --save |
| 160 | +``` |
| 161 | + |
| 162 | +**Major versions** |
| 163 | + |
| 164 | +```bash |
| 165 | +npm install @nuxtify/core@latest --save |
| 166 | +``` |
| 167 | + |
| 168 | +## <a name="contributing">❤️ Contributing</a> |
| 169 | + |
| 170 | +I invite you to contribute and help improve Nuxtify! |
| 171 | + |
| 172 | +Here are a few ways you can get involved: |
| 173 | + |
| 174 | +- **Reporting Bugs:** If you come across any bugs or issues, please [open a new issue](https://github.com/nuxtify-dev/core/issues/new). |
| 175 | +- **Suggestions:** Have ideas to enhance Nuxtify? I'd love to hear them! You can [open a new issue](https://github.com/nuxtify-dev/core/issues/new) describing your feature request or suggestion. |
| 176 | +- **Local Development:** contribute directly to the framework with a pull request. Just follow the instructions below. |
| 177 | + |
| 178 | +## <a name="local-development">🏠 Local Development</a> |
| 179 | + |
| 180 | +### CLI commands |
| 181 | + |
| 182 | +```bash |
| 183 | + # Install dependencies |
| 184 | + npm install |
| 185 | + |
| 186 | + # Generate type stubs |
| 187 | + npm run dev:prepare |
| 188 | + |
| 189 | + # Develop with the playground |
| 190 | + npm run dev |
| 191 | + |
| 192 | + # Build the playground |
| 193 | + npm run dev:build |
| 194 | + |
| 195 | + # Run ESLint |
| 196 | + npm run lint |
| 197 | + |
| 198 | + # Run Vitest |
| 199 | + npm run test |
| 200 | + npm run test:watch |
| 201 | +``` |
| 202 | + |
| 203 | +Learn about [authoring Nuxt modules](https://nuxt.com/docs/guide/going-further/modules). |
| 204 | + |
| 205 | +## <a name="license">⚖️ License</a> |
| 206 | + |
| 207 | +[MIT](https://github.com/nuxtify-dev/core/blob/main/LICENSE) |
| 208 | + |
| 209 | +<!-- Badges --> |
| 210 | + |
| 211 | +[npm-version-src]: https://img.shields.io/npm/v/@nuxtify/core/latest.svg?style=flat&colorA=020420&colorB=00DC82 |
| 212 | +[npm-version-href]: https://npmjs.com/package/@nuxtify/core |
| 213 | +[npm-downloads-src]: https://img.shields.io/npm/dm/@nuxtify/core.svg?style=flat&colorA=020420&colorB=00DC82 |
| 214 | +[npm-downloads-href]: https://npm.chart.dev/@nuxtify/core |
| 215 | +[license-src]: https://img.shields.io/npm/l/@nuxtify/core.svg?style=flat&colorA=020420&colorB=00DC82 |
| 216 | +[license-href]: https://npmjs.com/package/@nuxtify/core |
| 217 | +[nuxtify-src]: https://img.shields.io/badge/Nuxtify_Docs-00DC82 |
| 218 | +[nuxtify-href]: https://nuxtify.dev/docs |
| 219 | +[playground-src]: https://img.shields.io/badge/%F0%9F%8F%80_Playground-Demo-00DC82?labelColor=020420 |
| 220 | +[playground-href]: https://stackblitz.com/github/nuxtify-dev/core?file=playground%2Fapp.vue |
0 commit comments