unplugin / unplugin-vue-components Goto Github PK
View Code? Open in Web Editor NEW📲 On-demand components auto importing for Vue
Home Page: https://www.npmjs.com/package/unplugin-vue-components
License: MIT License
📲 On-demand components auto importing for Vue
Home Page: https://www.npmjs.com/package/unplugin-vue-components
License: MIT License
import { defineConfig } from 'vite';
import { resolve } from 'path';
import Vue from '@vitejs/plugin-vue';
import VueJsx from '@vitejs/plugin-vue-jsx';
import ViteComponents, { AntDesignVueResolver } from 'vite-plugin-components';
export default defineConfig({
resolve: {
alias: [
{
find: '@',
replacement: resolve(__dirname, 'src'),
},
],
},
plugins: [
Vue(),
VueJsx(),
ViteComponents({
deep: true,
dirs: ['src'],
extensions: ['vue', 'tsx'],
customComponentResolvers: [AntDesignVueResolver()],
}),
],
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
},
},
modules: {
localsConvention: 'camelCase',
},
},
});
Using v0.2.10
with vitesse, after running build script, vite is stucks at Building for production...
step on Windows 10.
After solving the issue about How to configure for Element UI?, I get a new problem.
This is about, when using Element UI, there is a component inside a component, and this library not automatically loaded it. For example, inside the menu-item
component there is tooltip
component, which is used/showed when the menu collapsed.
Here the example when I use menu-item
component without manually imported the tooltip
component.
And here the example when I try to use tooltip
on the same page (actually I don't need it in this page).
And here is the menu-item
code looks like, that using el-tooltip component.
So, how can we solve this problem?
I think this is about recursive component import.
Thanks in advance.
在vite.config.js
plugins中这样配置
ViteComponents({
customComponentResolvers: ViteIconsResolver({
componentPrefix: 'icon'
})
})
是否可以在组件中这样使用
<div v-for="(item, index) in list" :key="index">
<component v-bind:is="item.icon" />
{{ item.name }}
</div>
let list = [
{
icon: 'icon-mdi-account-convert',
name: '按钮1'
},
{
icon: 'icon-mdi-account-convert',
name: '按钮2'
}
]
如果不可以,是否有类似解决方案
github: https://github.com/haoziqaq/varlet
documentation: https://varlet.gitee.io/varlet-ui/
Hoping to get approval,thanks
Hi, I'm new to Vite and I wanted to try it with this plugin, but when I import the plugin and use it in vite.config.js
I get the following error :
I don't really know what I'm doing wrong because it's really the first thing i've done after starting the project.
Here is my vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ViteComponents from 'vite-plugin-components'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
ViteComponents()
]
})
vite.config.ts
customComponentResolvers: [
HeadlessUiResolver()
]
is not generating types for the Headless UI components as expected. When I remove import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } from '@headlessui/vue';
then the components have no typings in the template.
Potentially to #34 (needs alias: { vue: require.resolve("vue/dist/vue.esm.js") }
)
Two ways to init (Vue 2):
// App.vue
const app = createApp({
render: () => h(App),
});
// No App.vue — init on #app el
var app = new Vue({
el: "#app",
});
The latter will fail to register/find components.
If this is expected behavior, forgive me and close, but took me embarrassingly long to troubleshoot.
Hopefully this scenario can be supported. If a minimal codesandbox is needed, let me know.
Hello guys, new here.
The readme says that code splitting is supported, but how?
Any example?
Thank you!
If I enable sourcemap in vite config (build.sourceMap: true
), then I'll get this strange error:
[vite] Internal server error: ENOENT: no such file or directory, open '/home/kromanov/Playground/vite-example/src/components/HelloWorld.vue?vue&type=style&index=0&scoped=true&lang.css'
Here you can check reproduction of the bug.
Try to do npm run dev
, you'll see error.
Then disable sourcemap in vite config and run again. Error will gone.
https://github.com/Djaler/vite-vue2-components-sourcemap-bug
Just following the docs while using Vue 2.
The plugin recognizes the component path, but doesn't seem to import the components.
ViteComponents({ dirs: ['./src/components'], })
Unknown custom element: <Test> - did you register the component correctly? For recursive components, make sure to provide the "name" option
<template>
<div>
test
</div>
</template>
<script>
export default {
name: 'Test'
}
</script>
<style lang="scss" scoped>
</style>
I'm getting the following error when trying to use vite-plugin-components inside a brand new Vite project:
[vite] Dep optimization failed with error:
Could not load path (imported by node_modules/vite-plugin-components/dist/index.mjs): ENOENT: no such file or directory, open 'path'
My vite.config.ts:
import { UserConfig } from "vite";
import VitePluginComponents from "vite-plugin-components";
const config: UserConfig = {
plugins: [VitePluginComponents()],
};
export default config;
Update: It seems to only affect dev mode.
So far a great plugin, but it loses the most important part of typescript, typechecking and not only that goto does not work neither in volar or vetur.
Hey there,
so i just recently updated to the latest Version of vite-plugin-components
(0.7.3) and directoryAsNamespace
doesnt work anymore.
Expected:
ui/navigation.vue
--> ui-navigation.vue
Current Output:
ui/navigation.vue
--> navigation.vue
Test Repo will follow soon!
I'm using the plugin with directoryAsNamespace: true,
option. So for example I have my component app-header
stored at components/app/header.vue
. I worked fine until I've updated the version from 0.6.6 to 0.7.1. Now I have such errors in the console:
[vite-plugin-components] component "Card"(....../src/components/def/card.vue) has naming conflicts with other components, ignored.
[vite-plugin-components] component "List"(....../src/components/def/list.vue) has naming conflicts with other components, ignored.
[vite-plugin-components] component "Card"(......./src/components/link/card.vue) has naming conflicts with other components, ignored.
... and so on...
Looks like a bug. Or may be I need to make some changes to the config?
I added vite-plugin-components to my vite.config.js
I'm using a php stack with inertia and render runtime components with vue3-runtime-template
However, vue.esm-bundler.js says that my auto imported components can't be resolved.
the vue.esm-bundler.js is added as an alias 'vue'
resolve: {
alias: {
vue: 'vue/dist/vue.esm-bundler.js',
},
},
If i add
import Tabs from './components/ui/Tabs.vue'
and
.component('Tabs', Tabs)
my Tab component is rendered within the vue3-runtime-template component
(Haven't yet tested on Mac)
0.6.6 debugging of sample in Windows
vite-plugin-components:glob started with: [src/components/**/*.{vue,md}] +0ms
vite-plugin-components:glob 11 components found. +7ms
0.6.7 debugging
vite-plugin-components:glob started with: [C:\Data\Git\vite-plugin-components\example\src\components/**/*.{vue,md}] +0ms
vite-plugin-components:glob 0 components found. +9ms
Looks like the path is getting added to the wrong place.
Hi 👋🏻
I'm not sure if this problem is related to vite-plugin-components
or vuetify
directly, but when I start the dev server of vite
, I get this warning for each components of Vuetify:
╷
62 │ 'sm': $grid-gutter / 6,
│ ^^^^^^^^^^^^^^^^
╵
node_modules/vuetify/src/styles/settings/_variables.scss 62:11 @import
node_modules/vuetify/src/styles/settings/_index.sass 1:9 @import
node_modules/vuetify/src/styles/styles.sass 2:9 @import
node_modules/vuetify/src/components/VTreeview/_variables.scss 1:9 @import
node_modules/vuetify/src/components/VTreeview/VTreeview.sass 1:9 root stylesheet
DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($grid-gutter, 3)
I find them annoying. Is there any way to hidde them or remove them?
Last version requires fast-glob
package to work. It is included at your package.json
but seems pointing to a private package or a kind of specific version.
I need to install it manually into my own package.json
to the plugin work properly. It happens with all my Vite apps.
By installing fast-glob
at devDependencies
I have "fast-glob": "^3.2.5"
and it works.
After install and setup the plugin, before install fast-glob
:
$ npm start
> [email protected] start /home/alxbr/github/link-web-apps/online-video-conf/hosting
> vite --debug
failed to load config from /home/alxbr/github/link-web-apps/online-video-conf/hosting/vite.config.js
error when starting dev server:
Error: Cannot find module 'fast-glob'
Require stack:
- /home/alxbr/github/link-web-apps/online-video-conf/hosting/node_modules/vite-plugin-components/dist/index.js
- /home/alxbr/github/link-web-apps/online-video-conf/hosting/vite.config.js
- /home/alxbr/github/link-web-apps/online-video-conf/hosting/node_modules/vite/dist/node/chunks/dep-e0f09032.js
- /home/alxbr/github/link-web-apps/online-video-conf/hosting/node_modules/vite/dist/node/cli.js
- /home/alxbr/github/link-web-apps/online-video-conf/hosting/node_modules/vite/bin/vite.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
at Function.Module._load (internal/modules/cjs/loader.js:725:27)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.<anonymous> (/home/alxbr/github/link-web-apps/online-video-conf/hosting/node_modules/vite-plugin-components/dist/index.js:196:17)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Object.require.extensions.<computed> [as .js] (/home/alxbr/github/link-web-apps/online-video-conf/hosting/node_modules/vite/dist/node/chunks/dep-e0f09032.js:48590:13)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `vite --debug`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/alxbr/.npm/_logs/2021-03-13T19_12_32_691Z-debug.log
I saw the new customResolvers feature, it's awesome
Is there a way that we can add a custom resolver for our ui-kit library? something like this:
{
customResolvers: componentName => {
return { path: 'bootstrap-vue', import: 'BSelect' }
}
}
and import it like this:
import { BSelect } from 'bootstrap-vue'
Thanks for the great work.
config as follows:
// main.ts
import { createApp } from 'vue'
// import { Button } from 'ant-design-vue'
// import Antd from 'ant-design-vue'
import App from './App.vue'
import 'virtual:windi.css'
const app = createApp(App);
// app.use(Button)
// app.use(Antd)
app.mount('#root', true)
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ViteComponents, {
AntDesignVueResolver
} from 'vite-plugin-components'
// import ViteCompression from 'vite-plugin-compression'
import ViteStyleImport from 'vite-plugin-style-import'
import WindiCSS from 'vite-plugin-windicss'
// https://vitejs.dev/config/
export default defineConfig({
// 1. If you are using the ant-design series, you need to configure this
// 2. Make sure less is installed in the dependency `yarn add less -D`
css: {
preprocessorOptions: {
less: {
// modifyVars: {},
javascriptEnabled: true,
},
},
},
plugins: [
vue(),
// https://github.com/antfu/vite-plugin-components
ViteComponents({
globalComponentsDeclaration: true,
customComponentResolvers: [
AntDesignVueResolver(),
]
}),
// https://github.com/windicss/vite-plugin-windicss
WindiCSS(),
// https://github.com/anncwb/vite-plugin-compression
// ViteCompression(),
// https://github.com/anncwb/vite-plugin-style-import
ViteStyleImport({
libs: [
{
libraryName: 'ant-design-vue',
esModule: true,
resolveStyle: (name) => {
return `ant-design-vue/es/${name}/style/index`;
},
}
]
}),
]
})
<template>
<a-button type="primary">Ant Button</a-button>
</template>
style not generate
what should i do
is throwing a typescript error
src/utils.ts(143,70): error TS2339: Property 'resolve' does not exist on type 'Readonly<Pick<UserConfig, "root" | "mode" | "define"
| "css" | "esbuild" | "server" | "build" | "optimizeDeps" | "dedupe" | "logLevel"> & { configFile: string | undefined; ... 12 more ...; logger: Logger; }>'.
As this is a vite plugin it won't be utilized when running unit test and all components won't be transformed.
Is there any trick to get this working with the vue-test-utils
/ jest
?
If I want to automatically import components on demand from an UI library like ant-design-vue or element-plus , what should I do? Would you give an example in the document?
using element gives the following errors
GET http://localhost:3333/@id/@vite-icons/el/button net::ERR_ABORTED 404 (Not Found) vue-router.esm-bundler.js:72 [Vue Router warn]: uncaught error during route navigation: warn @ vue-router.esm-bundler.js:72 triggerError @ vue-router.esm-bundler.js:3240 (anonymous) @ vue-router.esm-bundler.js:2977 Promise.catch (async) pushWithRedirect @ vue-router.esm-bundler.js:2974 push @ vue-router.esm-bundler.js:2909 install @ vue-router.esm-bundler.js:3323 use @ runtime-core.esm-bundler.js:4001 createApp2 @ index.mjs:34 (anonymous) @ index.mjs:63 ViteSSG @ index.mjs:65 (anonymous) @ main.ts:12 vue-router.esm-bundler.js:3242 TypeError: Failed to fetch dynamically imported module: http://localhost:3333/src/layouts/404.vue?t=1624293178771 triggerError @ vue-router.esm-bundler.js:3242 (anonymous) @ vue-router.esm-bundler.js:2977 Promise.catch (async) pushWithRedirect @ vue-router.esm-bundler.js:2974 push @ vue-router.esm-bundler.js:2909 install @ vue-router.esm-bundler.js:3323 use @ runtime-core.esm-bundler.js:4001 createApp2 @ index.mjs:34 (anonymous) @ index.mjs:63 ViteSSG @ index.mjs:65 (anonymous) @ main.ts:12 vue-router.esm-bundler.js:72 [Vue Router warn]: Unexpected error when starting the router: TypeError: Failed to fetch dynamically imported module: http://localhost:3333/src/layouts/404.vue?t=1624293178771 warn @ vue-router.esm-bundler.js:72 (anonymous) @ vue-router.esm-bundler.js:3325 Promise.catch (async) install @ vue-router.esm-bundler.js:3323 use @ runtime-core.esm-bundler.js:4001 createApp2 @ index.mjs:34 (anonymous) @ index.mjs:63 ViteSSG @ index.mjs:65 (anonymous) @ main.ts:12 ssss:1 Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: http://localhost:3333/src/layouts/404.vue?t=1624293178771 Promise.then (async) install @ pwa.ts:8 (anonymous) @ main.ts:17 (anonymous) @ main.ts:17 createApp2 @ index.mjs:40 (anonymous) @ index.mjs:63 ViteSSG @ index.mjs:65 (anonymous) @ main.ts:12 index.mjs:65 Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: http://localhost:3333/src/layouts/404.vue?t=1624293178771
When I create a new component in src/components
and right after reference it in another one, I get an error saying the component could not be resolved. I have to restart Vite for the component to be available.
Is this the desired behavior because of some limitations or am I doing something wrong?
I've added vite-plugin-components to my vite project and it simply throws an error saying:
[...]/node_modules/vite-plugin-components/dist/index.js:156
return reqPath.endsWith(RESOLVER_EXT);
^
TypeError: Cannot read property 'endsWith' of undefined
I've casually checked the source code and it seems koa.path is undefined.
Directly use AntDesignVueResolver to load components on demand but fail to load styles
Use this method to :
import ViteComponents from 'vite-plugin-components'
plugins:[
ViteComponents({customComponentResolvers: [
(name: string) => {
if(name.match(/^A[A-Z]/)) return {
importName: name.slice(1),
path: 'ant-design-vue/es',
sideEffects: "ant-design-vue/es/style",
}
}
]})
]
I hope the author can check if there are health problems when building AntDesignVueResolver
Hi! I've created a fresh vite app with this plugin, added globalComponentsDeclaration: true
.
The file components.d.ts
is generated, but vscode doesn't show me warnings of incorrect using of props, unless I import the component.
Button.vue:
<script setup lang="ts">
import { defineProps } from 'vue'
const props = defineProps({
size: {
type: String,
required: true,
},
})
</script>
Component is not imported (no type checks for props)
Component is imported, so type check works great.
I'm expecting to see something like that: https://twitter.com/antfu7/status/1397168229005463563 but can't figure out what's wrong.
And what's more strange, this feature is working perfectly if I install a new vitesse project.
I try to use this awesome library to my Vue 2 project with Element UI. But keep getting errors.
Here is my custom config:
ViteComponents({
customComponentResolvers: [
(name) => {
if (name.startsWith('El')) { // Element UI
const partialName = paramCase(name.slice(2)) // e.g. ElButton -> button
return {
name: partialName,
path: 'element-ui/lib',
sideEffects: `element-ui/packages/theme-chalk/src/${partialName}.scss`,
}
}
return null
}
]
}),
And I get this error:
Cannot read property '$isServer' of undefined
Hope anyone can help, thanks in advance.
I'd like to be able to use kebab-casing in my templates. Currently, the casing appears to have to match the file name.
For example, if I have the component HelloWorld.vue
then I must use <HelloWorld />
in my template. I'd instead like to use <hello-world />
Vuetify allows customization using scss variables. The recommended way is to create a src/(scss|sass|styles)/variables.scss
file with the variables.
This doesn't work out of the box with ViteComponents({ customComponentResolvers: VuetifyResolver() })
.
I tried using vite's additionalData
: vitejs/vite#832 but the variables seem to only be parsed for the project's scss files, not the scss files from vuetify.
I ended up writing a custom plugin:
function vuetifyScssPlugin() {
return {
name: "vuetify-scss-plugin",
load(id) {
if (/\/V[A-Z]\w+.sass$/.test(id)) {
return '@import "@/scss/variables"\n' + fs.readFileSync(id);
}
},
};
}
const config = defineConfig({
plugins: [createVuePlugin(), vuetifyScssPlugin(), ViteComponents({ customComponentResolvers: VuetifyResolver() })],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
});
The style is now fine but the build time is much slower.
should we support the Record type alias
?
view.config.ts
:
plugins: [
vue(),
WindiCSS(),
ViteComponents({
customComponentResolvers: [
ElementPlusResolver(),
name => {
// auto import Headless UI
// where `name` is always CapitalCase
if (name.startsWith('Hl')) {
return { importName: name.slice(2), path: '@headlessui/vue' }
}
},
],
}),
PurgeIcons(),
styleImport({
libs: [
{
libraryName: 'element-plus',
esModule: true,
ensureStyleFile: true,
resolveStyle: name => {
name = name.slice(3)
return `element-plus/packages/theme-chalk/src/${name}.scss`
},
resolveComponent: name => {
return `element-plus/lib/${name}`
},
},
],
}),
]
element.ts
:
import {
ElIcon,
ElLoading,
locale,
} from 'element-plus'
import lang from 'element-plus/lib/locale/lang/zh-cn'
locale(lang)
node: 16.0.0
vite: 2.2.4
vite-plugin-components: 0.8.4
element-plus: 1.0.2-beta.41
When i use vite-ssg with vite-plugin-componsnts customComponentResolvers: [ElementPlusResolver()]
.
I will get Cannot use import statement outside a module
.
/Users/yunyou/github/pages/sponsors/node_modules/.pnpm/[email protected][email protected]/node_modules/element-plus/es/el-tabs/index.js:1
(function (exports, require, module, __filename, __dirname) { import { defineComponent, inject, getCurrentInstance, ref, watch, nextTick, openBlock, createBlock, computed, onUpdated, onMounted, onBeforeUnmount, h, provide, Fragment } from 'vue';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at new Script (vm.js:101:7)
at p._moduleCompile (/Users/yunyou/github/pages/sponsors/node_modules/.pnpm/[email protected]/node_modules/jiti/dist/v8cache.js:2:3154)
at Module.o._compile (/Users/yunyou/github/pages/sponsors/node_modules/.pnpm/[email protected]/node_modules/jiti/dist/v8cache.js:2:2705)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at n (/Users/yunyou/github/pages/sponsors/node_modules/.pnpm/[email protected]/node_modules/jiti/dist/v8cache.js:2:2472)
at Module.<anonymous> (/Users/yunyou/github/pages/sponsors/.vite-ssg-temp/main.js:13:29)
at Module.o._compile (/Users/yunyou/github/pages/sponsors/node_modules/.pnpm/[email protected]/node_modules/jiti/dist/v8cache.js:2:2778)
Use vitesse.
npx degit antfu/vitesse my-vitesse-app
cd my-vitesse-app
npm i
Add element-plus.
npm add element-plus
Config element-plus.
// src/modules/element.ts
import { UserModule } from "~/types";
import ElementPlus from "element-plus";
import "element-plus/lib/theme-chalk/index.css";
export const install: UserModule = ({ app }) => {
app.use(ElementPlus);
};
// vite.config.ts
export default defineConfig({
...
ViteComponents({
...
// auto import icons
customComponentResolvers: [
ElementPlusResolver()
],
}),
...
})
// App.vue
<template>
<router-view />
<el-button>TEST</el-button>
</template>
At last, npm run build
. We will get this error.
Remove ElementPlusResolver()
, and it works.
The export of element-plus is located in lib.
// element-plus/package.json
{
"main": "lib/index.js",
"module": "lib/index.esm.js",
"typings": "lib/index.d.ts",
"unpkg": "lib/index.js",
"style": "lib/theme-chalk/index.css",
}
And element-plus support on-demand import by vite-plugin-style-import
. It use element-plus/lib/${name}
.
https://element-plus.org/#/zh-CN/component/quickstart#an-xu-yin-ru
export default defineConfig({
plugins: [
vue(),
styleImport({
libs: [{
libraryName: 'element-plus',
esModule: true,
ensureStyleFile: true,
resolveStyle: (name) => {
name = name.slice(3)
return `element-plus/packages/theme-chalk/src/${name}.scss`;
},
resolveComponent: (name) => {
return `element-plus/lib/${name}`;
},
}]
})
]
})
So we can change element-plus/es/el-${partialName}
to element-plus/lib/el-${partialName}
.
If you think I am right, just tell me and I will create a PR for it.
import ViteComponents, { AntDesignVueResolver } from 'vite-plugin-components'
plugins: [
ViteComponents({customComponentResolvers: [AntDesignVueResolver()] })
]
Error message:Uncaught SyntaxError: The requested module '/node_modules/.vite/ant-design-vue_es.js?v=58a06493' does not provide an export named 'LayoutSider'
not support JSX
use vite config customComponentResolvers
Uncaught SyntaxError: The requested module '/node_modules/.vite/ant-design-vue_es.js?v=8f1bc1f8' does not provide an export named 'MenuItem'
When attempting to use a recursive component the plugin breaks.
Minimal reproduction: https://github.com/jacobclevenger/vite-plugin-components-recursion-bug
hi, as I am aware that when using vite, it needs to add the '.vue' suffix in every file, but now I am doing a update job from webpack4 to vite, so a great amount of vue files lacking of '.vue' suffix,which is impossible to fix them manually..... can this plugin do this job ? thanks !
When pack my project which use the plugin, the error shows as follow:
Sourcemap is likely to be incorrect: a plugin (vite-plugin-components) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
I have a recursive component that uses itself. The root component is auto imported and works, but calling the same component from the component wont.
But if you name the component, then it works.
Example:
<template>
<div>
<my-comp v-if="!level" :level="level+1"/>
</div>
</template>
<script>
// src/components/my-comp.vue
export default {
//name: 'my-comp', // COMPONENT RECURSION DO NOT WORK WITHOUT THIS LINE
props: {
level : { default: 0 }
}
}
</script>
Is this library can register SVGs as a component?
For example HomeIcon.svg
will be used as <HomeIcon />
in template.
when I use @antv/g6 with plugin, run vite build
console show
Conflicting namespaces: "node_modules/@antv/g6-pc/es/index.js" re-exports "Shape" from both "node_modules/@antv/g6-pc/es/index.js" and "node_modules/@antv/g6-core/es/index.js" (will be ignored) Conflicting namespaces: "node_modules/@antv/g6-pc/es/index.js" re-exports "Marker" from both "node_modules/@antv/g6-pc/es/index.js" and "node_modules/@antv/g6-core/es/index.js" (will be ignored) Conflicting namespaces: "node_modules/@antv/g6-pc/es/index.js" re-exports "Util" from both "node_modules/@antv/g6-pc/es/index.js" and "node_modules/@antv/g6-core/es/index.js" (will be ignored)
@antv/g6 not working
Is this plugin support dynamic components? Such as using <component :is="" />
I tried to use this plugin using dynamic components, but it's not rendering.
Example:
<!-- rendered to <mybutton /> -->
<component :is="'myButton'" />
<!-- correctly rendered -->
<myButton>
Vue2.x + Vite2.0 + ant-design-vue1.7.5
中文:
当我使用Ant-Design-Vue("ant-design-vue": "^1.7.5",)的时候
import ViteComponents, { AntDesignVueResolver } from "vite-plugin-components";
提示这样的报错,这个是否是Antd自身的问题?有解决方案吗?在其他也找过相关问题,但是没找到解决方案(顺便说下:新人小白,所以这个问题也许会浪费时间)
MT(machine translation)
When I use ant design Vue"ant-design-vue": "^1.7.5",
import ViteComponents, { AntDesignVueResolver } from "vite-plugin-components";
Prompt such an error. Is this the problem of antd itself? Is there a solution? I've found related problems in other places, but I haven't found a solution (btw: Newcomer,so this problem may be a waste of time)
Error Info:
utils.js:105 Uncaught TypeError: Unknown theme type: undefined, name: undefined
at withSuffix (utils.js:105)
at Icon.js:25
at Array.forEach (<anonymous>)
at Object.add (Icon.js:24)
at index.js:18
vite.config.js
import ViteComponents, { AntDesignVueResolver } from "vite-plugin-components";
const config = defineConfig({
plugins: [
ViteComponents({
customComponentResolvers: [
AntDesignVueResolver(),
ViteIconsResolver({
componentPrefix: "",
})
],
}),
// ViteIcons({
// defaultStyle: "",
// }),
// WindiCSS(),
],
});
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.