TypeScript Nuxt

Open-source TypeScript projects categorized as Nuxt
Edit details
Topics: #Vue #nuxt-module #NuxtJS #TypeScript #nuxt3
AWS Cloud-aware infrastructure-from-code toolbox [NEW]
Build cloud backends with Infrastructure-from-Code (IfC), a revolutionary technique for generating and updating cloud infrastructure. Try IfC with AWS and Klotho now (Now open-source)
klo.dev
Sponsored

Top 23 TypeScript Nuxt Projects

  • nuxt

    Nuxt is an intuitive and extendable way to create type-safe, performant and production-grade full-stack web apps and websites with Vue 3.

    Project mention: Help a fellow backend dev chose a frontend framework for his personal project | /r/Frontend | 2023-06-02

    Nuxt is the best experience you'll have building a front-end JS application — so many bells and whistles with a nice sensible zero-config starting point. Seriously, it's going to save you so much time. 100% Nuxt all the way if your application has even a mild amount of complexity.

  • next-auth

    Authentication for the Web.

    Project mention: How to implement a data access layer pattern in SvelteKit? | /r/SvelteKit | 2023-05-26

    So it pushes people with limited backend experience into the arms of Supabase, Pocketbase, Whateverbase and companies like Netlify and Vercel. And then there's the rise of stuff like [Auth.js](https://authjs.dev/)

  • Klotho

    AWS Cloud-aware infrastructure-from-code toolbox [NEW]. Build cloud backends with Infrastructure-from-Code (IfC), a revolutionary technique for generating and updating cloud infrastructure. Try IfC with AWS and Klotho now (Now open-source)

  • Vue Storefront

    The open-source frontend for any eCommerce. Built with a PWA and headless approach, using a modern JS stack. We have custom integrations with Magento, commercetools, Shopware and Shopify and total coverage is just a matter of time. The API approach also allows you to merge VSF with any third-party tool like CMS, payment gateways or analytics. Newest updates: https://blog.vuestorefront.io. Always Open Source, MIT license.

    Project mention: Open Source Projects Made Using Vue.js | /r/vuejs | 2023-01-30

  • actions-gh-pages

    GitHub Actions for GitHub Pages 🚀 Deploy static files and publish your site easily. Static-Site-Generators-friendly.

    Project mention: Where can I host a basic HTML page? Free. | /r/webdev | 2022-12-11

    Check out the GitHub action you can use for deploying to GitHub pages: https://github.com/peaceiris/actions-gh-pages.

  • vuefire

    🔥 Firebase bindings for Vue.js

    Project mention: How To Create A Mobile App Using Vite, Vue, and Ionic Capacitor - Adding Firebase & Firebase Emulator To Project | dev.to | 2023-03-15

    We'll walk you through the process step-by-step, providing terminal commands and source code to support the video, so you can follow along and see exactly how it's done. But that's not all - this post is part of an ongoing series on Firebase integration with Vite, Vue project. In upcoming videos, we'll show you how to fully integrate Firebase with VueFire, a library that provides seamless integration of Firebase with Vue.js applications.

  • unplugin-icons

    🤹 Access thousands of icons as components on-demand universally.

    Project mention: How do I use SVG icons in React? | /r/Frontend | 2023-04-08

    unplugin-icons will be the easiest and most robust option if you are using a bundler

  • content

    The file-based CMS for your Nuxt application, powered by Markdown and Vue components. (by nuxt)

    Project mention: Can we create a Bend wiki? | /r/Bend | 2023-03-27

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • vue-toastification

    Vue notifications made easy!

    Project mention: Trying to find a good toast library from Nuxt with Typescript | /r/Nuxt | 2023-05-19

  • auth-module

    Zero-boilerplate authentication support for Nuxt.js!

    Project mention: nuxt 3 stack for fullstack | /r/Nuxt | 2023-05-16

  • tailwindcss

    Tailwind CSS module for Nuxt (by nuxt-modules)

    Project mention: Look for solution for a problem. | /r/Nuxt | 2023-05-10

    hey, thanks for your comment. Actually I just found out here (https://github.com/nuxt-modules/tailwindcss/pull/660) that they removed generating tailwind.config.cjs file inside .nuxt folder in the latest update for some retarded reason. The problem is that the official tailwind intellisense requires that file for auto-completion to work. Doing 'npx tailwind init' means I'll have to manually add content, paths and plugins to it which contradicts the intention of using nuxt. If I want to manually do everything then why am I even using nuxt? I'll just have to resort to copying that previous generated file onto the newer projects.

  • i18n

    I18n module for Nuxt

    Project mention: Hello world | dev.to | 2023-01-28

  • pwa-module

    Zero config PWA solution for Nuxt.js

    Project mention: Best way to create a simple iOS app? | /r/vuejs | 2022-11-05

    My go-to is https://pwa.nuxtjs.org/ + pwabuilder. You can have the barebones scaffolding made in 1 minute. Then just add your custom UI/logic, and deploy, and point the PWA Builder at the deployed Nuxt site, and it will generate your App store package.

  • image

    Plug-and-play image optimization for Nuxt applications. (by nuxt)

    Project mention: Experience with nuxt 3 image module | /r/Nuxt | 2023-01-26

  • components

    Scan and auto import components for Nuxt.js 2.13+ (by nuxt)

    Project mention: [AskJS] why no other javascript framework has implemented this feature (yet) ? | /r/javascript | 2022-07-30

    Nuxt 2's auto import leads to obscure rendering bugs: https://github.com/nuxt/components/issues/164

  • device-module

    Nuxt.js module for detecting device type.

    Project mention: Checking my understanding of core concept behind Nuxt and SSR in general | /r/Nuxt | 2023-05-16

    Best module I've found so far to detect this in an SSR-friendly way is: https://github.com/nuxt-community/device-module but still not great all the time

  • composition-api

    Composition API hooks for Nuxt. (by nuxt-community)

  • vercel-builder

    Vercel Builder for Nuxt

    Project mention: Migrating a Nuxt SSR App from Heroku to Vercel | dev.to | 2023-01-02

    Vercel supports non-SSR out of the box, but for SSR to work, we need to deploy a serverless function that handles all the server-related functions. For this, we will need to use https://github.com/nuxt/vercel-builder built by the Nuxt community. To use it you need to create a vercel.json in your project’s root directory.

  • sidebase

    sidebase is the productive way to build fullstack Nuxt 3 applications

    Project mention: What Nuxt 3 backend are you using? | /r/vuejs | 2022-12-02

  • nuxt-auth

    🔐 Nuxt user authentication and sessions via authjs (next-auth), local and refresh providers. nuxt-auth wraps NextAuth.js to offer the reliability & convenience of a 12k star library to the nuxt 3 ecosystem with a native developer experience (DX)

    Project mention: nuxt 3 stack for fullstack | /r/Nuxt | 2023-05-16

    Full release notes: https://github.com/sidebase/nuxt-auth/releases/tag/0.6.0-alpha.1 Docs for v0.6: https://sidebase.io/nuxt-auth/v0.6/getting-started

  • primitives

    Components, icons, colors, and templates for building high-quality, accessible UI. Free and open-source. A project developed by @productdevbook (by oku-ui)

    Project mention: What are the biggest issues with Vue? | /r/vuejs | 2023-05-15

    https://github.com/oku-ui/primitives so this is in the works rn. Seems pretty interesting. I was thinking of trying to contribute to it when I get the time

  • nuxt-purgecss

    Drop superfluous CSS! A neat PurgeCSS wrapper for Nuxt.js

    Project mention: How to start optimized Vuetify 3 Nuxt 3 project | dev.to | 2022-12-29

    What about themes. When we analyze the created html bundle .output/public/index.html we imidiately see an large section in the html head. Read more about it in official documentation here. It contains whole configuration for v-theme--light, v-theme--dark and lots of generated selectors for each color configuration.

    We did not specify any theme to use but Vuetify internally by default applies theme light to everything within the v-app block. Therfore in generated index.html we can see that many elements use classes v-theme--light. But what if we disable themes in Vuetify totally? Will this section with unnecessary unused theme selectors and variables disapear? Lets try..

    We can try with disabling themes as described here in plugins/vuetify.ts:

    export default createVuetify({
  /* ADD */ theme: false, 
  ...
})
    Enter fullscreen mode Exit fullscreen mode

    After re-generating no theme selectors are applied anymore on any html elements, good, disabling of themes worked as expected. But... the section with unused selectors still remains as before in the head of generated index.html file. 👎

    Consider this a bug? Why does Vuetify add thise code if it is marked that themes are not desired and not used? Is there some way to remove all this redundand code, or only enable light theme and not dark to reduce amout of added code?

    To be updated when I know, but feel free to comment this in comments!

    Clean out unused CSS

    After some digging nuxt-purgecss seems like a good option to try to remove unnecessary css from final bundle. It must be mentioned that removal of unused css is generally a major issue in many projects and a topic of discussions. There does not exist any perfect tool for it at the writing moment. In order not to remove too much of the code we must have knowledge of how purgecss works and of the code whe want to minify. We need to configure purgecss in a way so thatt when/if new persons on the team do introduce new code, to ensure that it will not by accident remove related css in the final build. By my opinion it is better to optimaze to little and left a bit of unused code than risk that some part of page, some unusal state we seldom visit, or test, will stop working.

    I reccomend to read this good article mentioning issues with automatic css removal - How Do You Remove Unused CSS From a Site?.

    Purge css is a dummy tool, it scans html, vue and js files on locations that we provide to it, and create a list of selectors of all classes is finds. In some file x.html with

    it finds bg-red. In a vue file with it finds elevation-6 and so on. Then it analyzes the code that css files that are created by our project and removes all selectors from it not in this list. So customization of such a till to look for code in all locations the code is used from is essential for this to work. This is when it gets tricky with third party plugin like vuetify.

    Vuetify 3 generates its components with styles based on props and with help of render function. It is very tricky to find files in node_modules/vuetify where whe components are created and defining all classes and used selectors.

    I like using Vuetify with Nuxt and it is for the following little trick.

    First build a static site as nuxt provides this possibility in very easy way. Then ALL html will be generated WITH all classes selectors in dist folder.

    Afterward provide the dist folder to purgecss as a content location and do your build. Then purge have all class names and selector it need to keep from removing in the final css bundle.

    Here is how I did:

    Install the nuxt-purgecss plugin

    npm i -D nuxt-purgecss
    Enter fullscreen mode Exit fullscreen mode

    Add purgecss module and import our custom purgecss settings in nuxt.config.ts:

    /* ADD */ import purgeConfig from './modules/purgecss/config';

...

export default defineNuxtConfig({
  modules: [
    ...

    /* ADD */ ['nuxt-purgecss', purgeConfig],
  ],

  ...
});
    Enter fullscreen mode Exit fullscreen mode

    Add file and following settings in modules/pergecss/config.js:
    Note! There is lot of disabled code and I left it there for educational purpose. It can be used for option when we can not use static-generated-html method/trick. Then uncomment the comments, analyze the code and get your head dirty trying to expend the lists as your project grows.

    // Default safelist: https://github.com/Developmint/nuxt-purgecss/blob/main/src/config.ts
const defaultSafelist = [
    // 'body',
    // 'html',
    // 'nuxt-progress',
    // '__nuxt',
    // /-(leave|enter|appear)(|-(to|from|active))$/, // Normal transitions
    // /^nuxt-link(|-exact)-active$/, // Nuxt link classes
    // /^(?!cursor-move).+-move$/, // Move transitions
    // /.*data-v-.*/, // Keep scoped styles
    // // New Vue3 selectors
    // /:slotted/,
    // /:deep/,
    // /:global/,
];

// Default content: https://github.com/Developmint/nuxt-purgecss/blob/main/src/config.ts
const defaultContent = [
    // 'components/**/*.{vue,jsx?,tsx?}',
    // 'layouts/**/*.{vue,jsx?,tsx?}',
    // 'pages/**/*.{vue,jsx?,tsx?}',
    // 'composables/**/*.{vue,jsx?,tsx?}',
    // 'App.{vue,jsx?,tsx?}',
    // 'app.{vue,jsx?,tsx?}',
    // 'plugins/**/*.{js,ts}',
    // 'nuxt.config.{js,ts}',
];

/* Vuetify: Additional locations to scan */
const additionalLocations = ['modules/purgecss/static-generated-html/**/*.html'];

/* Vuetify: Selectors (runtime generated) better never not to remove */
const vuetifySafelist = [
    // /v-application/, // generated by vApp
    // /v-layout/, // generated by vApp
    // /v-toolbar/, // generated by vAppBar
    // /v-locale/,  // generated runtime by i.e vBtn if locale enabled
    // /v-icon/,  // generated by vBtn
    // /flex-grow-1/, // generated by v-spacer
    // /v-responsive/, // generated eager
];

/* Vuetify: Components and directives used in this project */
const usedComponents = [
    /v-ripple/, // when enabled, generated at runtime by vBtn
    // /v-app/,
    // /v-app-bar/,
    // /v-app-bar-nav-icon/,
    // /v-navigation-drawer/,
    // /v-toolbar-title/,
    // /v-container/,
    // /v-sheet/,
    // /v-main/,
    // /v-card/,
    // /v-btn/,
    // /v-col/,
    // /v-row/,
];

export default {
content: [...defaultContent, ...additionalLocations],
  safelist: {
    greedy: [...vuetifySafelist, ...usedComponents],
    standard: [...defaultSafelist],
  },
};
    Enter fullscreen mode Exit fullscreen mode

    All this can be exchanged with onliner in nuxt.config.ts but I wanted to show how uch configuration is needed for this small about of code for purgecss to let the code it should not remove be. That is when we do not use our little trick with build twice with generated content as input.

    After all those modifications run now npm run generate followed by npm run preview and it will generate static files in .output/public/ folder.

    🩻Analazing generated file:
    .output/public/index.html 14kB (3kB gzipped)
    .output/public/_nuxt/enter.xxx.js 184kB (67kB gzipped)
    .output/public/_nuxt/enter.xxx.css 14kB (3.4kB gzipped)

    The css is much much smaller than from beggining.😀👍
    We started with 370kB and ended up with 14kB (unzipped). It an awsome reduction.

    CONCLUSION

    We created a nice and educational starter template project using Vuetify 3 on top of Nuxt 3. We did did som small optimization to keep the bundle small in production.

    BEFORE OPTIMIZATION
    .output/public/index.html 14kB (3kB gzipped)
    .output/public/_nuxt/enter.xxx.js 408kB (125kB gzipped)
    .output/public/_nuxt/enter.xxx.css 371kB (51kB gzipped)

    AFTER OPTIMIZATION
    .output/public/index.html 14kB (3kB gzipped)
    .output/public/_nuxt/enter.xxx.js 184kB (67kB gzipped)
    .output/public/_nuxt/enter.xxx.css 14kB (3.4kB gzipped)

    We reduced in total from 795kB to 212kB (zipped from 179kB to 73kB)
    Reduction: 75% unzipped and 60% unzipped.

    I know there index.html contains lots of unused themes. At writing moment I have no solution for that but will update here asap I know.

    Do you have any comment what more can be done to minimize bundle for this starter even more?

    Hope you did learn something usefull through this article.

    ✌️

  • salvia-kit

    Provides 9 Free Beautiful dashboard templates built with Tailwind CSS for React, Next.js, Svelte, Vue and Nuxt.js

  • router-module

    Nuxt.js module to use router.js instead of pages/ directory.

  • Sonar

    Write Clean JavaScript Code. Always.. Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.

NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020). The latest post mention was on 2023-06-02.

TypeScript Nuxt related posts

Index

What are some of the best open-source Nuxt projects in TypeScript? This list will help you:

Project Stars
1 nuxt 45,545
2 next-auth 16,863
3 Vue Storefront 10,213
4 actions-gh-pages 3,895
5 vuefire 3,548
6 unplugin-icons 2,615
7 content 2,507
8 vue-toastification 2,457
9 auth-module 1,862
10 tailwindcss 1,361
11 i18n 1,221
12 pwa-module 1,176
13 image 932
14 components 869
15 device-module 730
16 composition-api 691
17 vercel-builder 631
18 sidebase 585
19 nuxt-auth 569
20 primitives 465
21 nuxt-purgecss 441
22 salvia-kit 400
23 router-module 399

Sponsored
Access the most powerful time series database as a service
Ingest, store, & analyze all types of time series data in a fully-managed, purpose-built database. Keep data forever with low-cost storage and superior data compression.
www.influxdata.com