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. Learn more →
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-02Nuxt 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.
-
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.
-
actions-gh-pages
GitHub Actions for GitHub Pages 🚀 Deploy static files and publish your site easily. Static-Site-Generators-friendly.
Check out the GitHub action you can use for deploying to GitHub pages: https://github.com/peaceiris/actions-gh-pages.
-
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 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)
-
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!
-
Project mention: Trying to find a good toast library from Nuxt with Typescript | /r/Nuxt | 2023-05-19
-
-
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.
-
-
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.
-
-
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
-
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
-
-
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.
-
-
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)
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)
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
-
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 generatedindex.html
we can see that many elements use classesv-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 modeAfter 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 notdark
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 modeAdd 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 modeAdd 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 modeAll 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 bynpm 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
-
-
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.
TypeScript Nuxt related posts
- Fixing hydration node mismatch
- Vitron - Library to build beautiful (win, linux, mac) desktop apps for modern web projects with vite and electron.
- Will you use Next13 app directory for your next commercial product?
- AI Assisted Blog with Nuxt, GitHub Codespaces & Actions
- nuxt 3 stack for fullstack
- Checking my understanding of core concept behind Nuxt and SSR in general
- Look for solution for a problem.
-
A note from our sponsor - InfluxDB
www.influxdata.com | 3 Jun 2023
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 |