Build progressively enhanced web apps and sites with Nuxt and Vuetify.

Nuxtify Pages

Note

Early Access Preview: This module is under active development. While it is already used to power a handful of sites in production, expect things to change frequently. I will do my best to call out breaking changes in the changelog.

Table of Contents

• ♾️ Why Nuxtify?
• ✨ Features
• 🚀 Quick Start
• 🔧 Configuration
• ✅ Updates
• ❤️ Contributing
• 🏠 Local Development
• ⚖️ License

♾️ Why Nuxtify?

Nuxtify is a collection of Nuxt modules that help you stay organized, maintain focus, and ship weirdly fast.

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.

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.

This unlocks a powerful way of working.

Use the defaults when they're helpful, and progressively upgrade when they're not.

This means you can:

• Setup a new project using the default configuration in a matter of minutes.
• Use the default footer component, but completely change the navigation component.
• Change the colors of all the buttons with one line of code.
• Override the default button component with a style of your choosing.
• And much more...

In short, Nuxtify helps you build faster, iterate smarter, and maintain consistency – without sacrificing control or creativity.

✨ Features

Nuxtify builds on the amazing features of Vue, Nuxt, and Vuetify.

💡 Intuitive UI & UX

• Ready to use components, page templates, and layouts so you can ship weirdly fast
• Easily override any component with Vuetify global defaults
• Icons powered by Material Design Icons via Vuetify icon fonts
• Fully responsive and adapts to all modern browsers and devices
• (coming soon) Light and dark mode toggle

💎 Premium DX

• Zero-config with sensible defaults for common use cases
• All components use the modern Vue Composition API and Single File Component (SFC) syntax
• TypeScript auto-complete and type safety for all components
• ESLint support out of the box using flat config (v9)
• Identify performance gaps and seamlessly manage your app with Nuxt Devtools
• Clean, elegant code that's easy to understand and customize
• Loosely opinionated, leveraging ecosystem standards so you're not locked into outdated dependencies and practices

🤖 Smart SEO, Security, & Performance

• Fully tree shakeable for small bundle sizes
• Optimized caching and rendering strategies for each page with hybrid rendering
• (coming soon) Robots, sitemaps, schema.org, social share images, broken links, and more powered by Nuxt SEO
• (coming soon) Fast, responsive, optimized images for 20+ image providers powered by Nuxt Image
• (coming soon) Load third-party scripts with better performance, privacy, security powered by Nuxt Scripts
• (coming soon) Optimal security patterns and principles powered by Nuxt Security

🌐 Host Anywhere

• Deploy to any Node.js server, static host, or serverless edge CDN environment with 20+ hosting providers supported

🚀 Quick Start

To use this module in your new or existing Nuxt project:

1. Install the module

Install the module in your Nuxt application with one command:

npx nuxi@latest module add @nuxtify/pages

2. Update Nuxt config

Add the @nuxtify/pages module to nuxt.config.ts and configure it:

// nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    '@nuxtify/pages'
  ],
  nuxtify: {
    /* module specific options */
  }
});

Read the 📖 documentation for a complete guide on how to configure and use this module.

3. Start building!

Develop and deploy your Nuxt app like any other.

🔧 Configuration

Module configuration

To see the full config, check out the types.

Overriding the defaults

Nuxtify comes pre-configured with sensible defaults. Both for how the module functions and for the corresponding Nuxt directory.

If you need to override a component, page, or layout, create the a file with the same name in your project (in the appropriate directory).

If you need to override a composable or utils utility function, create a function with the same name in your project (in the appropriate directory).

✅ Updates

✨ Release Notes

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.

Minor and patch versions

npm update @nuxtify/pages --save

Major versions

npm install @nuxtify/pages@latest --save

❤️ Contributing

I invite you to contribute and help improve Nuxtify!

Here are a few ways you can get involved:

• Reporting Bugs: If you come across any bugs or issues, please open a new issue.
• Suggestions: Have ideas to enhance Nuxtify? I'd love to hear them! You can open a new issue describing your feature request or suggestion.
• Local Development: contribute directly to the framework with a pull request. Just follow the instructions below.

🏠 Local Development

CLI commands

  # Install dependencies
  npm install
  
  # Generate type stubs
  npm run dev:prepare
  
  # Develop with the playground
  npm run dev
  
  # Build the playground
  npm run dev:build
  
  # Run ESLint
  npm run lint
  
  # Run Vitest
  npm run test
  npm run test:watch

Learn about authoring Nuxt modules.

⚖️ License

MIT