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);
Related
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
My apologies with this dumb question. I'm new to Vue and followed some tutorial on just setting it up and did it the way advised but now I don't see anything.
As said above, after importing and adding Vuex to my project, nothing is loaded on the page and there are no errors in the terminal while running the development server.
main.js
// ** if I comment these out then the page will load
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/store.js' // <-- **
Vue.config.productionTip = false
new Vue({
router,
store, // <-- **
render: h => h(App)
}).$mount('#app')
store.js
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
export default new Vuex.store({
state: {
user: '',
role: ''
},
mutations: {
},
actions: {
},
getters: {
}
})
if there is additional information needed then let me know
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'm trying to use i18n outside a component I've found this solution https://github.com/dkfbasel/vuex-i18n/issues/16 telling to use Vue.i18n.translate('str'), but when I call this occurs an error Cannot read property 'translate' of undefined.
I'm using the following configuration
main.js
import i18n from './i18n/i18n';
new Vue({
router,
store,
i18n: i18n,
render: h => h(App)
}).$mount('#app')
i18n.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import i18nData from './i18nData'
Vue.use(VueI18n);
export default new VueI18n({
locale: 'en',
messages: i18nData,
});
i18nData.js
export default {
en: {
//my messages
}
}
Then I trying to use this
import Vue from 'vue';
Vue.i18n.translate('someMessage');
Can anyone help me?
To use i18n with Vue 3's composition API, but outside a component's setup(), you can access its translation API (such as the t function) on its global property.
E. g. in a file with unit-testable composition functions:
// i18n/index.js
import { createI18n } from 'vue-i18n'
import en from './en.json'
...
export default createI18n({
datetimeFormats: {en: {...}},
locale: 'en',
messages: { en }
})
// features/utils.js
//import { useI18n } from 'vue-i18n'
//const { t } = useI18n() // Uncaught SyntaxError: Must be called at the top of a `setup` function
import i18n from '../i18n'
const { t } = i18n.global
You should import i18n instead of Vue
import i18n from './i18n'
i18n.tc('someMessage')
You can use VueI18n outside components by importing i18n then, use "t" from i18n.global.
"t" doesn't need "$" and you can change Locale with i18n.global.locale.
import i18n from '../i18n';
const { t } = i18n.global;
i18n.global.locale = 'en-US'; // Change "Locale"
const data = {
name: t('name'), // "t" doesn't need "$"
description: t('description'), // "t" doesn't need "$"
};
I managed to make it work this way:
import router from '../router';
Translate a text:
let translatedMessage = router.app.$t('someMessage');
Get the current language:
let language = router.app.$i18n.locale;
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