vitejs / awesome-vite Goto Github PK
View Code? Open in Web Editor NEW⚡️ A curated list of awesome things related to Vite.js
Home Page: https://github.com/vitejs/vite
License: MIT License
⚡️ A curated list of awesome things related to Vite.js
Home Page: https://github.com/vitejs/vite
License: MIT License
Image design based on vite + vue3 + fabric.js
Link to the repo https://github.com/dromara/yft-design
Hi, I am an active contributor awesome-vue and would like to offer my help in maintaining the relevance and timely adoption of the PR in this package.
Anyway, let me know what you think about it.
Official
@vitejs/plugin-react-refresh - Official React Refresh support.
Link in reload react section does not work
[vite-vanilla-tailwind-v3] is outdated as it was last updated in March 2022
I use quasar (vue3) with Vite and want to use a nom package (orbit-db) which uses requires.
in the quasar.config.js (for Vite) I have this plugin registered
// extendViteConf (viteConf) {},
// viteVuePluginOptions: {},
vitePlugins: [
[ 'vite-plugin-require', { fileRegex:/(.js?|.tsx?|.vue)$/} ]
]
},`
in the code I have
import * as IPFS from 'ipfs-core' import {onMounted} from 'vue' const OrbitDB = require('orbit-db'). //<<this line causes the error
But I still get vue-router.mjs:3451 TypeError: Failed to fetch dynamically imported module: http://localhost:9000/src/pages/Orbit.vue
on the terminal output I get the following lines. Whit do I wrong to get this module to run ?
`
App dir................ /Users/ek/orb
» App URL................ http://localhost:9000/
http://10.136.76.250:9000/
» Dev mode............... spa
» Pkg quasar............. v2.10.2
» Pkg @quasar/app-vite... v1.1.3
» Browser target......... es2020
App • Opening default browser at http://localhost:9000/
✘ [ERROR] [plugin vite:dep-pre-bundle] No known conditions for "./cid" entry in "multiformats" package
node_modules/vite/dist/node/chunks/dep-689425f3.js:38597:7:
38597 │ throw new Error(
╵ ^
at bail (/Users/ek/orb/node_modules/vite/dist/node/chunks/dep-689425f3.js:38597:8)
at resolve (/Users/ek/orb/node_modules/vite/dist/node/chunks/dep-689425f3.js:38654:32)
at resolveExports (/Users/ek/orb/node_modules/vite/dist/node/chunks/dep-689425f3.js:40982:12)
at resolveDeepImport (/Users/ek/orb/node_modules/vite/dist/node/chunks/dep-689425f3.js:41000:31)
at tryNodeResolve (/Users/ek/orb/node_modules/vite/dist/node/chunks/dep-689425f3.js:40773:20)
at Context.resolveId (/Users/ek/orb/node_modules/vite/dist/node/chunks/dep-689425f3.js:40581:28)
at Object.resolveId (/Users/ek/orb/node_modules/vite/dist/node/chunks/dep-689425f3.js:39254:55)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async /Users/ek/orb/node_modules/vite/dist/node/chunks/dep-689425f3.js:61583:27
at async /Users/ek/orb/node_modules/vite/dist/node/chunks/dep-689425f3.js:38771:34
This error came from the "onResolve" callback registered here:
node_modules/vite/dist/node/chunks/dep-689425f3.js:38750:18:
38750 │ build.onResolve({ filter: /^[\w@][^:]/ }, async ({ ...
╵ ~~~~~~~~~
at setup (/Users/ek/orb/node_modules/vite/dist/node/chunks/dep-689425f3.js:38750:19)
at handlePlugins (/Users/ek/orb/node_modules/vite/node_modules/esbuild/lib/main.js:855:23)
at Object.buildOrServe (/Users/ek/orb/node_modules/vite/node_modules/esbuild/lib/main.js:1149:7)
at /Users/ek/orb/node_modules/vite/node_modules/esbuild/lib/main.js:2110:17
at new Promise (<anonymous>)
at Object.build (/Users/ek/orb/node_modules/vite/node_modules/esbuild/lib/main.js:2109:14)
at Object.build (/Users/ek/orb/node_modules/vite/node_modules/esbuild/lib/main.js:1956:51)
at runOptimizeDeps (/Users/ek/orb/node_modules/vite/dist/node/chunks/dep-689425f3.js:39994:34)
at async runOptimizer (/Users/ek/orb/node_modules/vite/dist/node/chunks/dep-689425f3.js:50529:38)
The plugin "vite:dep-pre-bundle" was triggered by this import
node_modules/orbit-db/src/orbit-db-address.js:3:24:
3 │ const { CID } = require('multiformats/cid')
╵ ~~~~~~~~~~~~~~~~~~
17:18:30 [vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/vite/dist/node/chunks/dep-689425f3.js:38597:7: ERROR: [plugin: vite:dep-pre-bundle] No known conditions for "./cid" entry in "multiformats" package
at failureErrorWithLog (/Users/ek/orb/node_modules/vite/node_modules/esbuild/lib/main.js:1624:15)
at /Users/ek/orb/node_modules/vite/node_modules/esbuild/lib/main.js:1266:28
at runOnEndCallbacks (/Users/ek/orb/node_modules/vite/node_modules/esbuild/lib/main.js:1046:63)
at buildResponseToResult (/Users/ek/orb/node_modules/vite/node_modules/esbuild/lib/main.js:1264:7)
at /Users/ek/orb/node_modules/vite/node_modules/esbuild/lib/main.js:1377:14
at /Users/ek/orb/node_modules/vite/node_modules/esbuild/lib/main.js:678:9
at handleIncomingPacket (/Users/ek/orb/node_modules/vite/node_modules/esbuild/lib/main.js:775:9)
at Socket.readFromStdout (/Users/ek/orb/node_modules/vite/node_modules/esbuild/lib/main.js:644:7)
at Socket.emit (node:events:513:28)
at addChunk (node:internal/streams/readable:315:12)
Vite Error, /node_modules/.q-cache/vite/spa/deps/orbit-db.js?v=2fcde633 optimized info should be defined
Vite Error, /node_modules/.q-cache/vite/spa/deps/orbit-db.js?v=2fcde633 optimized info should be defined
`
如题,有一些依赖包,里面有些是用require写的,但是编译require不生效。
@nxext/angular-vite doesn't exist anymore.
This is very useful resource, but as it is getting bigger, it is even more difficult to process all the links. I thought it will be useful to add badges to help to choose.
We can choose badge generator like shields.so or githubadges.com
So rather than this
It will look like this:
or
badges could be styled differently, like:
Once we agree on style, it should be straightforward to switch with some regex and string replace
Hi, I want to add my template to the template list.
https://github.com/misitebao/vite-petite-vue-starter
Starter using Vite + Petite-vue for super fast prototyping.
in my web developer cancer, vue is used in back system about 70%. Maybe, we should add a admin-template category to collect the admin template about vite.
plz
Analog has their own vite plugin for Angular support which has much better integrations with Vite and Vitest then currently mentioned @nxext/angular-vite
Link to the repo - https://github.com/analogjs/analog/tree/main/packages/vite-plugin-angular
Hey, comming from vitejs/vite#1404, I was wondering how would I go about adding my plugin for solid-js?
As much as I would like to say this is among the most popular libraries, this isn't quite there yet. I was just wondering if I should follow the pattern of the other libraries like
Or if you'd rather have something like "other integrations"?
Just want to be sure I don't miss anything there. CONTRIBUTING.md didn't really outlined that :)
Thanks!
I want to create a Vite template for my organization.
It has some specific dependencies and a default folder management, along with default CSS styling.
Is there a way to create it and share with my coworkers?
I upgrade vue-component-template to vite 3
I've put together a backend integration for Go based web apps. PR to come.
Hello
Can I add my vite-react-cil to awesome-vite?
github address: https://github.com/lgf196/vite-react-cil
An awesome list should not propose stuff that doesn't have the main focus of the maintainers. Since 2.7 will be the last release I think its time to encourage people to start with vue 3.
Is there a plugin that I could use to copy and then transform a file at the start of npm run dev
sessions? All the plugins that I have found only work when npm run build
is executed. I need to generate a manifest file that will be used by the application during development build.
Does this project has all the credibility to be included?
https://github.com/maifeeulasad/react-pipeline
This is a deployment-ready boilerplate, using:
This can be a good push for the beginners, who want to run.
Ready to send a PR.
I've constructed frontend stack with docker compose, please add this to list.
Hope this would be usefully to community 💻
https://github.com/dendrofen/docker-vitejs-tailwind-handlebars
Also there is no-docker version for this build:
Hi, please add my plugin)
https://github.com/TheLucifurry/vite-plugin-type-to-schema
This is a simple plugin, that converts types to JSON Schema via path suffix
Given there is a list of all lists, I'd recommend trying to get on it: the Awesome list. There is already a pull request out there to get added to the list, but this list isn't fully compliant.
There are a couple of requirements, a lot of which using the awesome-lint and its GitHub Action can help resolve.
However, some, such as changing the default branch from master
to main
, must be done by repository administrators.
Otherwise, it looks like a great opportunity overall.
Should outdated and not maintained plugins be marked somehow? So the search for a plugin is a bit easier?
Github Stars count is an important criteria for choosing plugins.
What do you think about placing a label with a Stars count next to each list item?
Hi, I'd love to add the storybook vite builder to this list if you're open to it. But, I'm not sure what section it would belong in.
--
// vite.config.json
import { resolve } from 'path'
import nodeResolve from '@rollup/plugin-node-resolve'
import react from '@vitejs/plugin-react-swc'
import { defineConfig } from 'vite'
import vitePluginDts from 'vite-plugin-dts'
import tsconfigPaths from 'vite-tsconfig-paths'
export default defineConfig({
plugins: [
react({
jsxImportSource: '@emotion/react',
}),
vitePluginDts({
insertTypesEntry: true,
}),
tsconfigPaths({ root: './' }),
],
build: {
lib: {
entry: resolve(__dirname, 'src/main.ts'),
},
rollupOptions: {
external: [
'@emotion/react',
'@emotion/styled',
'@types/react',
'@types/react-dom',
'react',
'react-dom',
'typescript',
],
plugins: [
nodeResolve({
resolveOnly: [/^@packages\/.*$/],
}),
],
},
},
})
It is a situation where unbuilt code must be imported and used like an external dependency.
Therefore, I should use the 'resolveOnly' option in '@rollup/plugin-node-resolve' because the packages must be included in the build.
However, this option conflicts with 'vite-tsconfig-paths' and the following error occurs:
[vite:load-fallback] Could not load ~/src/@emotion/react/jsx-runtime (imported by ~/index.tsx): ENOENT: no such file or directory, open '~/src/@emotion/react/jsx-runtime'
error during build:
Error: Could not load ~/src/@emotion/react/jsx-runtime (imported by index.tsx): ENOENT: no such file or directory, open '~/src/@emotion/react/jsx-runtime'
here is my tsconfig.json
// tsconfig.json
{
"compilerOptions": {
"target": "ES6",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"noImplicitAny": true,
"resolveJsonModule": true,
"isolatedModules": true,
"jsxImportSource": "@emotion/react",
"incremental": true,
"strictNullChecks": true,
"noImplicitThis": false,
"allowSyntheticDefaultImports": true,
"noFallthroughCasesInSwitch": true,
"baseUrl": "src",
"typeRoots": ["node_modules/@types", "types"],
"jsx": "react-jsx"
},
"include": ["vite.config.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}
Are there any other plug-ins that can be replaced?
Hi, I found a few broken hyperlinks:
When I tried to open a PR I saw this point in the checklist.
The repo should be at least 30 days old.
I'm just curious what the point of this is?
Thanks, in advance!
I want to add my Electron + Vite + SolidJS + tailwindcss template
https://www.npmjs.com/package/vite-esbuild-typescript-checker
hello, I can't decide on the category. My plugin works with both vanilla and vue 2-3 and react. Typescript type checking. How to choose correctly? Thanks
Vite has new logo. Current one looks more like vue.
When clicking the blue TOC button on readme file on FF, the link opens the icon in another tab.
Description: Adds the filename without the -module suffix to the class names of CSS modules.
Npm: https://www.npmjs.com/package/vite-plugin-pretty-module-classnames
Repo: https://github.com/teplostanski/vite-plugin-pretty-module-classnames
Hi, would love to get my plugin in the list:
https://www.npmjs.com/package/vite-plugin-vue-static-sfc
https://github.com/arikw/vite-plugin-vue-static-sfc
🙏
I want to create a library similar to PrimeReact but I have had problems. I would like to receive support . Cracks @patak-dev and @antfu have a repo out there to take reference
Hey, would like to suggest phaser-bifrost-vite to be added to the templates.
Besides Vite, the template also has a basic example of how to create React UIs within Phaser with React Bifrost
Title is self explanatory. The repo seems to be dead.
Hi,
Can we add Drupal related stuff ?
Some time ago I made a vite/rollup plugin, to remove "data-testid" (or whatever you specify) from react source code for production builds
Previous art was using babel (slow).
npm: https://www.npmjs.com/package/rollup-plugin-jsx-remove-attributes
git: https://github.com/jacobbogers/rollup-plugin-jsx-remove-attributes#readme
Adding on an entry for ddev-viteserve, an add-on for DDEV, a docker-based development environment used mostly by PHP developers. This would typically be used in conjunction with a PHP-oriented back end.
Not really an integration, but there isn't a category that fits better. Open to suggestions if you folks want me to move it.
As the title says, can someone point me to which template would be best for building a Vue 3 component library. Typescript is not needed, but can be included.
Or is it better to just start from scratch?
Thanks
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.