I'm trying to figure out how to change elementu-ui components to element-plus. Part of my migration from vue 2 to vue 3. I find the documentation isn't clear how to register components in vue 3 in the main.js file.
This is the error I get
"export 'Tree' was not found in 'element-plus'
warning in ./src/main.js
"export 'default' (imported as 'Vue') was not found in 'vue'
Here's my main.js file
import Vue, { createApp, h } from 'vue'
import Vue, { createApp, h } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import {
Button,
Select,
Option,
Dropdown,
TableColumn,
Checkbox,
Badge,
Divider,
Tag,
DropdownItem,
Pagination,
Table,
DropdownMenu,
Tree,
Tooltip,
} from 'element-plus'
import lang from 'element-plus/lib/locale/lang/en'
import locale from 'element-plus/lib/locale'
const getCookieConsent = localStorage.getItem('Cookie acceptance')
if (typeof getCookieConsent !== 'undefined' && getCookieConsent === 'true') {
FullStory.init({ orgId: '14C6AX' })
Vue.prototype.$FullStory = FullStory
}
locale.use(lang)
Vue.component(Tree.name, Tree)
Vue.component(Button.name, Button)
Vue.component(Divider.name, Divider)
Vue.component(Checkbox.name, Checkbox)
Vue.component(Pagination.name, Pagination)
Vue.component(Tag.name, Tag)
Vue.component(Badge.name, Badge)
Vue.component(Table.name, Table)
Vue.component(TableColumn.name, TableColumn)
Vue.component(Select.name, Select)
Vue.component(Dropdown.name, Dropdown)
Vue.component(DropdownItem.name, DropdownItem)
Vue.component(DropdownMenu.name, DropdownMenu)
Vue.component(Tooltip.name, Tooltip)
Vue.component(Option.name, Option)
createApp({
render: () => h(App)
}).use(router).use(store).mount('#app')
In Vue 3, it is not possible (or at least it shouldn't be done that way) to register components globally. You have to create a Vue app using createApp, and then register components for this app.
Also, the element-plus documentation explains everything you need to know to import their components.
// main.js
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// Create your Vue 3 app
const app = createApp(App)
// Choice #1: register all components. Impacts global bundle size
app.use(ElementPlus, {
// options
})
app.mount('#app')
If you want to use treeshaking, just import the components when you need them:
// my-component.vue
// Choice #2: import and register components as you need them
import { ElTree } from 'element-plus'
export default {
components: {
ElTree
}
}
Try to import all components with the prefix El, they are exported this way apparently.
I update my package and the previous code not work any more. At last I modified some code and it works.
1, vite.config.js remove
{
libraryName: 'element-plus',
libraryDirectory: 'es',
style(name) {
return `element-plus/theme-chalk/${name}.css`;
},
}
])
2, main.js the past use(component) to remove. Change to:
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus, {
// options
})
app.component("ElSubmenu", ElMenu.SubMenu); // ElSubmenu seems special to register like this
Related
How to best resolve the warning: Failed to resolve component: v-treeview, which results in a failure to render the desired treeview component?
I've tried the top suggestions in answers here, including specifically importing the components and directives and passing them to createVuetify in both the plugin and main files, (also suggested in the "Getting Started" docs.) I've tried turning off cache, downgrading vuetify, deleting node_modules and reinstalling, and some other things that either didn't work or broke everything.
Using
"vue": "^3.2.38"
"vuetify": "^3.0.0-beta.10"
src/plugins/veutify.js
(created by vite or vuecli)
import '#mdi/font/css/materialdesignicons.css'
import 'vuetify/lib/styles/main.sass'
import { createVuetify } from 'vuetify'
export default createVuetify(
)
src/main.js
(created by vite/vuecli)
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify'
import { loadFonts } from './plugins/webfontloader'
loadFonts()
createApp(App)
.use(router)
.use(vuetify)
.mount('#app')
Fields.vue
(custom)
<template>
<div>
<v-treeview :items="structure" />
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
...
// structure = [{name:'...',id:'...'},...]
const structure = ref([])
...
onMounted(async () => {
...
structure.value = await parseStructure(j)
}
...
I'm new to Vue CLI, and I'm trying to build a small application. As part of this I want to generate some forms.
I've tested a few libraries, and NCForms seems to do all I need to do. (specifically, I need to handle capturing of multiple arrays).
I tried to initialize the library as described in the documentation - but it fails in the Template saying that it can't find some of the element-ui components.
I'm pretty sure that I've followed the instructions properly - but I must be missing something small.
My main.js file looks like this:
import 'ant-design-vue/lib/style/index.less' // antd core styles
import './#kit/vendors/antd/themes/default.less' // default theme antd components
import './#kit/vendors/antd/themes/dark.less' // dark theme antd components
import './global.scss' // app & third-party component styles
import Vue from 'vue'
import VuePageTitle from 'vue-page-title'
import NProgress from 'vue-nprogress'
import VueLayers from 'vuelayers'
import BootstrapVue from 'bootstrap-vue'
import VueFormulate from '#braid/vue-formulate'
// Form generator: Vue-Form-Generator: https://github.com/vue-generators/vue-form-generator
import VueFormGenerator from 'vue-form-generator'
import 'vue-form-generator/dist/vfg.css'
// Form generator: NCForms: https://github.com/ncform/ncform
import vueNcform from '#ncform/ncform'
// eslint-disable-next-line no-unused-vars
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import ncformStdComps from '#ncform/ncform-theme-elementui'
// REST Calls: Axios: https://github.com/axios/axios
import axios from 'axios'
// Local files
import App from './App.vue'
import router from './router'
import store from './store'
import { i18n } from './localization'
import './antd'
import './registerServiceWorker'
// mocking api
import './services/axios/fakeApi'
Vue.use(BootstrapVue)
Vue.use(VueLayers)
Vue.use(NProgress)
Vue.use(VuePageTitle, {
prefix: 'Nedbank PhishTank | ',
router,
})
// Form generator: Vue-Form-Generator
Vue.use(VueFormGenerator)
// Form generator: NCForms
Vue.use(vueNcform, { extComponents: ncformStdComps, lang: 'en' })
window.$http = Vue.prototype.$http = axios
Vue.use(VueFormulate)
Vue.config.productionTip = false
const nprogress = new NProgress({ parent: 'body' })
new Vue({
router,
store,
nprogress,
i18n,
render: h => h(App),
}).$mount('#app')
My template looks like this:
<template>
<div>
<ncform :form-schema="formSchema" form-name="settings-form" v-model="item" #submit="submit()"></ncform>
<el-button #click="submit()">Submit</el-button>
</div>
</template>
<script>
export default {
data() {
return {
formSchema: {
type: 'object',
properties: {
name: {
type: 'string',
},
},
},
item: {
name: 'Peter Pan',
},
}
},
methods: {
submit () {
this.$ncformValidate('settings-form').then(data => {
if (data.result) {
console.log(this.$data.formSchema.value)
// do what you like to do
alert('finally!!!')
}
})
},
},
}
</script>
The error is:
Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Am I missing something like registering the individual components? I thought this line would take care of it: Vue.use(vueNcform, { extComponents: ncformStdComps, lang: 'en' })
It feels like I should put something into the "new Vue()" statement - but I'm not sure what....
In main.js, you need to specify: Vue.use(Element);
I am using the element ui template, but when adding some components such as el-drawer, it appears to me that it is not registered,
https://element.eleme.io/#/es/component/drawer
vue.runtime.esm.js:574 [Vue warn]: Unknown custom element: <el-drawer> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <Dashboard>
<AppMain> at src/layout/components/AppMain.vue
<Layout> at src/layout/index.vue
<App> at src/App.vue
<Root>
How can I add or fix it?
Thank you
Template: https://github.com/PanJiaChen/vue-admin-template
ref:https://element.eleme.io/#/es/component/quickstart#configuracion-global
main.js
/* eslint-disable */
import Vue from 'vue'
import 'normalize.css/normalize.css' // A modern alternative to CSS resets
import axios from 'axios'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/en' // lang i18n
import '#/styles/index.scss' // global css
import App from './App'
import store from './store'
import router from './router'
import '#/icons' // icon
import '#/permission' // permission control
/**
* If you don't want to use mock-server
* you want to use MockJs for mock api
* you can execute: mockXHR()
*
* Currently MockJs will be used in the production environment,
* please remove it before going online! ! !
*/
import { mockXHR } from '../mock'
if (process.env.NODE_ENV === 'production') {
mockXHR()
}
// set ElementUI lang to EN
Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
// Vue.use(ElementUI)
axios.defaults.baseURL='https://localhost:44340/'
//axios.defaults.baseURL='http://localhost/'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
I have been trying for some time to upgrade my app from vuetify 1.5 to 2, after a lot of thought I think the issue is that the way my app initializes causes the issue, I cannot put my finger on exactly what it is though, the issue is that when I run the app I get errors in the console that none of the vuetify components are recognized.
Attached is a screenshot of the error message.
My main.js file:
import 'babel-polyfill' // IE support
import VueI18n from 'vue-i18n'
import {localizationFactory} from "./localization";
import {apiFactory, apiPluginFactory} from './api/api';
import {storeFactory} from "./store/store";
import {configServiceFactory} from "./services/configService";
import {Services, Security, Utils} from 'em-common-vue';
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import {filtersFactory} from './filters/index';
import Vuetify from "vuetify/lib";
const appsService = new Services.appsService(process.env);
const loginDetails = {
loginHost: appsService.getLoginStorage()
};
Security.ServiceFactory(loginDetails).then($security => {
Vue.config.productionTip = false;
Vue.use(Utils.EventBusPlugin);
Vue.use($security);
var vInstance = new Vue();
const $api = apiFactory(vInstance, $security);
configServiceFactory($security, $api).then($config => {
Vue.use($config);
Vue.use(apiPluginFactory($api));
// for now
const store = storeFactory($api, null);
Vue.use(VueI18n);
filtersFactory($config.$service);
localizationFactory($config.$service).then(messages => {
const i18n = new VueI18n({
locale: 'en', // set locale
messages, // set locale messages
});
Vue.use(Vuetify);
let vuetify = new Vuetify({
icons: {
iconfont: 'mdiSvg',
},
});
new Vue({
router,
store,
i18n,
vuetify,
render: h => h(App),
computed: {
title: {
set(val) {
document.querySelector('title').innerText = val;
},
get(val) {
return document.querySelector('title').innerText;
}
}
},
mounted() {
if (!document.querySelector('title')) {
let title = document.createElement('title');
document.head.append(title);
}
this.title = this.$config.get().title;
}
}).$mount('#app')
});
});
}).catch(err => {
console.error(err);
if (err.loginUrl) {
const nextUrl = appsService.getLogin(window.location.href);
window.location.href = nextUrl;
} else { // for now
alert(err);
}
});
How might I change my code to load vuetify properly? Alternatively what might be a pattern that might work for my code?
TL;DR:
Replace import Vuetify from "vuetify/lib"; with import Vuetify from "vuetify";
Alternatively if you want to use vuetify-loader:
Add vuetify-loader to your project (if already present, update it)
If you're using webpack directly add the vuetify-loader plugin to your webpack plugins:
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
exports.plugins.push(new VuetifyLoaderPlugin());
If you used #vue/cli to setup your project, you can use the configureWebpack option in vue.config.js to add the plugin:
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
module.exports = {
configureWebpack: {
plugins: [
new VuetifyLoaderPlugin()
]
}
}
Why?
vuetify comes in two "flavors":
A-la-carte
All vuetify components will not be directly required, but only loaded when you explicitly import them.
This greatly reduces your final package size, since you only include the parts of the vuetify framework that you're actually using.
You're using A-la-carte if you're importing vuetify from vuetify/lib:
import Vue from "vue";
import Vuetify from "vuetify/lib";
Vue.use(Vuetify);
const vuetify = new Vuetify({ /* ... */});
new Vue({vuetify}).$mount('#root');
The downside of a-la-carte is that you need to manually import each vuetify component you want to use:
import {VIcon} from "vuetify/lib";
export default {
name: 'foo-component',
components: { VIcon },
template: '<v-icon>user</v-icon>'
};
To make this less a hassle, you can either:
use vuetify-loader, it will automatically add those imports for you if you set it up correctly.
globally load components you use a lot:
import Vue from 'vue';
import Vuetify, { VLayout } from 'vuetify/lib';
// globally register v-layout.
// now you don't need to import it in every component that uses it
Vue.use(Vuetify, { components: { VLayout } });
Normal Mode
If you import vuetify directly, it'll automatically load all its components for you and is ready to use without further configuration:
// not a-la-carte, will load all vuetify components
import Vue from "vue";
import Vuetify from "vuetify"; // **not** /lib
Vue.use(Vuetify);
const vuetify = new Vuetify({ /* ... */});
new Vue({vuetify}).$mount('#root');
I am new to Quasar framework. Could someone explains how load quasar-components in Globally use. (every where in my application)
My main.js is like:
import Vue from 'vue'
import Quasar from 'quasar'
import router from './router'
require(`quasar/dist/quasar.${__THEME}.css`)
Vue.config.productionTip = false
Vue.use(Quasar) // Install Quasar Framework
if (__THEME === 'mat') {
require('quasar-extras/roboto-font')
}
import 'quasar-extras/material-icons'
// import 'quasar-extras/ionicons'
// import 'quasar-extras/fontawesome'
// import 'quasar-extras/animate'
Quasar.start(() => {
/* eslint-disable no-new */
new Vue({
el: '#q-app',
router,
render: h => h(require('./App').default)
})
})
Unknown custom element: <q-btn> - did you register the component correctly?
For recursive components, make sure to provide the "name" option.
found in
---> <App> at src\App.vue
<Root>
Whenever you're using any Quasar elements (eg. q-btn, q-select), you need to import and export it in your .vue file.
Example, for a <q-btn> to display, you might use
<q-btn > Confirm </q-btn>
But to display that, you need to include following into your .vue file. Like:
import {
QSelect,
QBtn
} from 'quasar'
export {
QSelect,
QBtn
} from 'quasar'
Like this, you will be registering all your components.
In my projects I import and use with components like this
import Quasar, { QBtn, QSelect } from 'quasar-framewok';
Vue.use(Quasar, {
components: { QBtn, QSelect }
});
Only for test case import all
import Quasar, * as All from 'quasar';
Vue.use(Quasar, {
components: All,
directives: All
});
See Quasar docs