DOCSEARCHbyAlgolia
Submit Docs

Awesome Nuxt

website·Indexed 30 days ago

https://awesome-nuxt.js.org/

A curated collection of resources for the Nuxt framework, including official and community modules, starter templates, Docker images, books, and a showcase of real-world projects and open-source applications built with Nuxt v3 and Nuxt.js.

Tokens
3.7K
Snippets
2
Records
34
Agent score
56%

What's inside Awesome Nuxt

  1. Implement Cypress tests in Nuxt using hex-digital/nuxt-cypress-example

    The hex-digital/nuxt-cypress-example repository provides practical examples of how to implement Cypress end-to-end tests for various Nuxt functionalities, including Nuxt auth.
    # Clone the example repository to explore Cypress test implementations for Nuxt
git clone https://github.com/hex-digital/nuxt-cypress-example

  3. Community Nuxt modules for Specialized Functionality

    Miscellaneous modules for specific application requirements:

    • nuxt-mobile-detect: Detects user devices on both client and server sides.
    • nuxt-user-agent: Handles User-Agent strings.
    • nuxt-basic-auth-module: Adds basic authentication to the application.
    • nuxt-socket-io: Integration for socket.io-client (compatible with Nuxt 2.x).
    • nuxt-fullpage.js & fullpage-nuxt: Implement fullscreen scrolling websites.
    • nuxt-viewport: Allows defining custom viewports.
    • nuxt-rollbar-module & nuxt-bugsnag: Error tracking integrations for Rollbar and Bugsnag.
    • nuxt-helmet: Integration of the Helmet security middleware.
    • nuxt-feature-toggle: Manages feature toggles within the app.

  4. Implement Nuxt.js with various backend and CMS integrations

    Developers can integrate Nuxt.js with several backend technologies depending on the project requirements:

    • Headless CMS: Directus, Drupal, WordPress REST API, Prismic.io, and Netlify CMS.
    • Custom APIs: Laravel, Ruby on Rails, Django Rest Framework, and Adonis.js.
    • E-commerce: Shopify and Magento 2 (often as a PWA).
    • Styling Frameworks: TailwindCSS, Bootstrap Vue, and Bulma.

  5. Select a Nuxt.js starter template by integration or feature

    Depending on your project requirements, you can use various community-maintained starter templates to bootstrap your Nuxt.js application. Common integrations include:

    Backend Frameworks:

    • AdonisJS: nuxt-community/adonuxt
    • Express: nuxt-community/express or nekdolan/express-hot (with hot reload)
    • KoaJS: nuxt-community/koa
    • Laravel: cretueusebiu/laravel-nuxt or acidjazz/laranuxt (using official proxy module)
    • Sails.js: Tarrask/sails-template
    • Egg Framework: liyanlong/nuxt-egg
    • Thinkjs: baisheng/nuxt-thinkjs3

    Desktop & PWA:

    • Electron: nuxt-community/electron, nurdism/electron-nuxt-boilerplate, or exeteres/electron-nuxt-ts (TypeScript focused)
    • PWA: nuxt-community/pwa

    CMS & Content:

    • WordPress (Headless): bovas85/nuxt-headless, yashha/wp-nuxt-stack-starter, or hex-digital/nuxtpress (Dockerized)
    • Contentful: equinusocio/nuxt-contentful-starter
    • Markdown/Blogging: galvez/nuxpress or marinaaisa/nuxt-markdown-blog-starter (Multilingual)
    • Content-Heavy Sites: nuxt-community/nuxtent-template

    Tooling & Architecture:

    • TypeScript: nuxt-community/typescript or CKGrafico/Frontend-Boilerplates
    • Atomic Design: RadKod/rk-nuxt-atomic-design-starter
    • Testing (Cypress): melrefaie/nuxt-cypress
    • Nuxt Modules: nuxt-community/module-template or vinayakkulkarni/module-template-ava (using Ava)
    • UI Frameworks: vuetifyjs/nuxt (Vuetify), mandaputtra/nuxtbulma-starter (Bulma), or muhibbudins/nuxt-coreui (CoreUI)

  6. Deploy Nuxt.js projects to AWS S3 and CloudFront

    Automate the deployment of Nuxt.js projects to AWS S3 and CloudFront using acidjazz/aeonian or the fume platform (which supports both server and static hosting, custom domains, and integrations).

  10. Real-world project examples using Nuxt

    Nuxt is used across various industries for different architectural patterns, including Static Site Generation (SSG), Server-Side Rendering (SSR), and Progressive Web Apps (PWAs). Common integrations include headless CMSs (Strapi, Directus, Storyblok, Craft CMS), e-commerce platforms (Magento 2), and various UI frameworks (Tailwind CSS, Bulma, Vuetify, Bootstrap Vue).

  11. Real-world project examples built with Nuxt.js

    Nuxt.js is used across a wide variety of project types, from static portfolios to complex e-commerce PWAs. Common architectural patterns include pairing Nuxt.js with headless CMS options (Directus, Drupal, WordPress, Prismic.io), backend APIs (Laravel, Rails, Django, Adonis.js), or static site generation for performance.

  12. Build E-commerce and PWA sites with Nuxt

    Nuxt is suitable for high-traffic e-commerce and PWA applications. Notable examples include:

    • Magento 2 Integration: Vendic and Soane Britain use Nuxt to build PWAs powered by Magento 2.
    • High-Traffic Portals: hurriyetemlak.com (Turkey's largest real estate portal) and Ouestfrance-immo.com handle millions of monthly visits.
    • Marketplaces: Back Market (refurbished products) and Freshworks Marketplace.