vitejs / awesome-vite Goto Github PK

Title is self explanatory. The repo seems to be dead.

https://unplugin-detect-duplicated-deps.vercel.app/introduction.html

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

如题，有一些依赖包，里面有些是用require写的，但是编译require不生效。

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?

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

Svelte

• SvelteKit - The fastest way to build Svelte apps.
• sttv - Svelte, Tailwind CSS, TypeScript.
• svelte-vite-ssr - Svelte with SSR support.

It will look like this:

Svelte

• SvelteKit - The fastest way to build Svelte apps.
• sttv - Svelte, Tailwind CSS, TypeScript.
• svelte-vite-ssr - Svelte with SSR support.

or

Svelte

• - The fastest way to build Svelte apps.
• - Svelte, Tailwind CSS, TypeScript.
• - Svelte with SSR support.

badges could be styled differently, like:

Once we agree on style, it should be straightforward to switch with some regex and string replace

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.

@nxext/angular-vite doesn't exist anymore.

Should outdated and not maintained plugins be marked somehow? So the search for a plugin is a bit easier?

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

solid

Plugins for solid

• my plugin

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!

[vite-vanilla-tailwind-v3] is outdated as it was last updated in March 2022

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.

Official
@vitejs/plugin-react-refresh - Official React Refresh support.

Link in reload react section does not work

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
`

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

I saw this in the readme:

And thought that maybe you could do something like this at the top too? Maybe?

↖️ Click <img height="16" valign="middle" src="https://i.imgur.com/yFtQXvN.png" /> for TOC

↖️ Click for TOC

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
🙏

Hi,

Can we add Drupal related stuff ?

• https://www.drupal.org/project/vite (Drupal module)
• https://www.npmjs.com/package/vite-plugin-drupal-template-hmr (HMR capabilities on Drupal templating system)

Use the "Table of Contents" menu on the top-left corner to explore the list.

The Table of Contents icons if on the top-right for my client, not top-left.

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.

--

Vite has new logo. Current one looks more like vue.

// 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?

Electron、vue3、vite2 integration 😄

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, 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.

I upgrade vue-component-template to vite 3

Hi, I found a few broken hyperlinks:

• https://github.com/time4dev/vite-esbuild-typescript-checker (file: README.md, status code: 404)
• https://github.com/vitejs/vite/tree/main/packages/plugin-vue (file: README.md, status code: 404)
• https://github.com/vitejs/vite/tree/main/packages/plugin-vue-jsx (file: README.md, status code: 404)
• https://github.com/vitejs/vite/tree/main/packages/plugin-react (file: README.md, status code: 404)
• https://github.com/nrwl/nx/tree/master/packages/cra-to-nx (file: README.md, status code: 404)

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 want to add my Electron + Vite + SolidJS + tailwindcss template

maulik9898/electron-vite-solidjs-tailwindcss

I've put together a backend integration for Go based web apps. PR to come.

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

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:

https://github.com/dendrofen/vitejs-tailwind-handlebars

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

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

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.

Hello

Can I add my vite-react-cil to awesome-vite?

github address： https://github.com/lgf196/vite-react-cil

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.

1. TailwindCSS
2. Vitest
3. VitePress for Docs

Or is it better to just start from scratch?

Thanks

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.

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

throw error when use vite-plugin-global-style:

Image design based on vite + vue3 + fabric.js
Link to the repo https://github.com/dromara/yft-design

When clicking the blue TOC button on readme file on FF, the link opens the icon in another tab.

Does this project has all the credibility to be included?

https://github.com/maifeeulasad/react-pipeline

This is a deployment-ready boilerplate, using:

• React
• TS
• AntD
• Vite
• Tailwind

This can be a good push for the beginners, who want to run.

Ready to send a PR.

Hi,

vite-vue3-tailwind-starter link is dead and should be replaced or removed.

Cheers

plz

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.

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!

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.

Because may Chinese doc could help some Chinese speakings get started faster, so should I add it now or later when I have a translation of English?

Previous pr: #453 ovx