unplugin-auto-import
unocss
unplugin-auto-import | unocss | |
---|---|---|
22 | 56 | |
2,948 | 15,442 | |
2.1% | 1.5% | |
7.5 | 9.7 | |
9 days ago | 6 days ago | |
TypeScript | TypeScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
unplugin-auto-import
-
Welcome to the dark side. Ree.js awaits you!
Unplugin auto import
- Vue 3 vs Vue 2 so far? What's your opinion? Things I didn't like about Vue 3 compared to Vue 2
-
using types without import them
You looked through https://github.com/antfu/unplugin-auto-import/issues/61, https://github.com/unjs/unimport/pull/218 and https://github.com/antfu/unplugin-auto-import/issues/61?
-
Saw this on twitter last night ππ
unplugin-auto-import, let's you set what any library to be automatically imported. It has reasonable defaults for popular libraries.
-
Better DX in JS apps with unplugin-auto-import
AutoImport({ // targets to transform include: [ /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx /\.vue$/, /\.vue\?vue/, // .vue /\.md$/, // .md ], // global imports to register imports: [ // presets 'vue', 'vue-router', // custom { '@vueuse/core': [ // named imports 'useMouse', // import { useMouse } from '@vueuse/core', // alias ['useFetch', 'useMyFetch'], // import { useFetch as useMyFetch } from '@vueuse/core', ], 'axios': [ // default imports ['default', 'axios'], // import { default as axios } from 'axios', ], '[package-name]': [ '[import-names]', // alias ['[from]', '[alias]'], ], }, ], // Enable auto import by filename for default module exports under directories defaultExportByFilename: false, // Auto import for module exports under directories // by default it only scan one level of modules under the directory dirs: [ // './hooks', // './composables' // only root modules // './composables/**', // all nested modules // ... ], // Filepath to generate corresponding .d.ts file. // Defaults to './auto-imports.d.ts' when `typescript` is installed locally. // Set `false` to disable. dts: './auto-imports.d.ts', // Auto import inside Vue template // see https://github.com/unjs/unimport/pull/15 and https://github.com/unjs/unimport/pull/72 vueTemplate: false, // Custom resolvers, compatible with `unplugin-vue-components` // see https://github.com/antfu/unplugin-auto-import/pull/23/ resolvers: [ /* ... */ ], // Generate corresponding .eslintrc-auto-import.json file. // eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals eslintrc: { enabled: false, // Default `false` filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json` globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable') }, })
- Vue 3 over Nuxt 3
-
Import commonly-used module once, not in each component?
If you donβt want to write the import everywhere, use a unplug auto importing plug-in: https://github.com/antfu/unplugin-auto-import
-
Pinia as global $store
I forgot to specify, for the AutoImport I'm using unplugin-auto-import/vite
-
[NUXT3] Is there a more elegant way to get current route?
Others have already mentioned answers but I just want to say if you are bothered by importing reactive and computed take a look at https://github.com/antfu/unplugin-auto-import.
-
[AskJS] why no other javascript framework has implemented this feature (yet) ?
You can check out https://github.com/antfu/unplugin-auto-import
unocss
-
Tailwind CSS v4.0.0 Alpha
I wish tailwind would support attributify like https://github.com/unocss/unocss, which is much more readable for complex layouts:
link
- UnoCSS β an Instant On-Demand Atomic CSS Engine
-
Catalyst β Tailwind CSS Application UI Kit
I feel the same about people praising Tailwind.
Tailwind (and similar, I tend to use https://unocss.dev/) is not good for your frontend architecture BUT they allow you to be so fast, that it negates the benefits.
For a job well done, I'd follow the principles of https://maintainablecss.com/
-
What do you think we can do better to improve Vue position in the frontend space as a dominant UI framework?
I think UnoCss is may be better than Tailwind already and has a good Vue integration https://unocss.dev/
-
~~New~~ Old way to write CSS
The most popular tools that implement this approach are: Tailwind, WindiCSS, UnoCSS.
-
Which is best for DX and efficiency, TailwindCSS, UnoCSS, PandaCSS, or the new MasterCSS
- UnoCSS: https://unocss.dev/
-
A design system for the federal government
haha, fair point. Still, I'm on the fence about how utility components are namespaced in USWDS. Perhaps giving users the flexibility to define the namespace might work better? One thing that bugs me is the absence of class-sorting like we have in TailwindCSS. Plus, there are some gaps I've noticed in USWDS. The naming, especially when comparing "padding-x-2" and "p-x-2", can be really annoying when switching around, maybe that could also be an option for the developer or project. Similar to the ideas antfu has on uno.css https://unocss.dev/ β₯
-
Modern CSS Framework or Library for Static Websites?
UnoCSS is a popular option
-
Vrite Editor: Open-Source WYSIWYG Markdown Editor
UnoCSS β for styling with Tailwind-like atomic CSS;
-
Why I Switched From Neovim to VSCode
Some exceptional libraries and frameworks only support VSCode, which you could argue is a bad thing, but it makes sense, VSCode is the most popular code editor after all. For example UnoCSS only has a VSCode extension, and it's my favourite way to write CSS. Astro has a LSP but I've found that the experience in VSCode is much better than in Neovim.
What are some alternatives?
unplugin-vue-components - π² On-demand components auto importing for Vue
Tailwind CSS - A utility-first CSS framework for rapid UI development.
pinia - π Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support
windicss - Next generation utility-first CSS framework.
vite-plugin-pages - File system based route generator for β‘οΈVite
tail-kit - Tail-kit is a free and open source components and templates kit fully coded with Tailwind css 3.0.
unplugin-vue2-script-setup - π‘ Bring `<script setup>` to Vue 2.
vite - Next generation frontend tooling. It's fast!
Quasar Framework - Quasar Framework - Build high-performance VueJS user interfaces in record time
Svelte - Cybernetically enhanced web apps
vanilla-extract - Zero-runtime Stylesheets-in-TypeScript