I am trying to get the UIkit CSS framework to work with VueJS-based app.
I have included the framework with yarn, and the styling works fine.
However whenever I try to programmatically invoke any of UIkit components I get the error message UIkit is not defined.
Here are the extracts from my app files:
main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import UIkit from 'uikit';
import Icons from 'uikit/dist/js/uikit-icons';
UIkit.use(Icons);
new Vue({
router,
render: h => h(App)
}).$mount("#app");
App.vue (this is just added to the bottom of the file, without it the styling won't work)
<style lang="less">
#import "../node_modules/uikit/src/less/uikit.theme.less";
</style>
And an example of problem causing code - in this case trying to open a modal window:
UIkit.modal('#mod-department-edit').show();
Thing to point out would be if I simply include the uikit framework by using & tags, either by local files or using cdn it all work fine.
So clearly I am missing something somewhere. Any idea what that might be?
Related
I'm totally a newbie in front end struggeling to wrap my head around it.
I have a question in Vue, for which I could't find answer anywhere: What does the 'vuetify' object here mean in the Vue constructor? I do know what veutify is, but why is it passed to the Vue constructor?
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
Vue.config.productionTip = false
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app')
I have checked the Vue document https://012.vuejs.org/api/options.html
Every option has it's reserved name, like data, methods etc. But there are no definition of passing a 3rd party library or object to it.
Can anybody help me with this?
you can definitely pass custom or 3rd party options/library so you can use them in your Vue Application.
https://012.vuejs.org/api/instance-properties.html
Hi i have situation where css and scss is not applied of a component of 1 app into another app
I have 2 apps
core
plugins
i want to use the components of a core app into plugins app
here is how i'm doing
Core App
//main.js
import "bootstrap/dist/css/bootstrap.min.css";
const app1 = new Vue({
render: h => h(App),
....
})
//core.component.vue
<template>
.....
</template>
<script>
export default{
name:'CoreComponent',
....
}
</script>
<styles lang="scss" scoped>
$bgColor:red; <--- these css are not applied when used in app 2
... <--- these css are not applied when used in app 2
</styles>
Core provides component mappers for providing component when requested to plugins.
//core-component-mapper.js
export default{
CoreComponent: require('path/CoreComponent.vue').default,
}
Below my plugins App setup
import "bootstrap/dist/css/bootstrap.min.css";
import CoreComponentMapper 'path/core-component-mapper.js'
const app2 = new Vue({
render: h => h(App),
components:{
FirstCoreComp: CoreComponentMapper.CoreComponent,
},
})
Note: please ignore any mistake in my demo code, code works perfectly in my setup except user defined css is not applied
Question: whichever css is defined on component of app 1 i,e core by me is not applied when used in App 2 i,e plugins
Note: i did not setup any webpack config i guess my both vue app is using default vue-loader config
Intresting thing is that bootstrap css works don't know why.(it is used in both the apps)
#MatJ as you asked in one of your comment i'm attaching screenshot (as per me css are not merged , but inline css are applied well)
Please help me thanks in advance!!
It looks like the css that are not being applied are inside a scoped block:
<style lang="scss" scoped>
and this is exactly how scoped css in vue are supposed to work.
If you wish to have a common shared style, just put the variables you need in a separate .css file and import it like you do with the bootstrap css.
Here is an article explaining properly all the solutions that are available with Vue3 style tag.
Here, you could either:
remove scoped from your style tag (it's not styles btw)
inject some global CSS coming from another file higher in the app
use the new :global(.your-query-selector)
selector.
Case and problem
I´m working on a private project with Vue.js and have the following error, which occurs when I´m trying to use the FileUpload component of PrimeVue:
[Vue warn]: Property "$primevue" was accessed during render but is not defined on instance.
Trying to use FileUpload in my component:
<template>
<FileUpload name="demo[]" url="" #upload="onUpload" :multiple="true" :maxFileSize="1000000">
<template #empty>
<p>Drag and drop files to here to upload.</p>
</template>
</FileUpload>
</template>
The error only occurs, when I try to use FileUpload, if I remove it, the component works. FileUpload and PrimeVue are imported like they should, in the main.js:
import {createApp} from 'vue'
import router from "./router";
import store from "./store";
import PrimeVue from "primevue/config";
import PrimeIcons from "primevue/config";
import App from "./App";
const app = createApp(App);
app.use(
router,
PrimeVue,
PrimeIcons,
store
)
import 'primevue/resources/primevue.min.css'
import 'primeflex/primeflex.css'
import 'primeicons/primeicons.css'
import 'primevue/resources/themes/bootstrap4-dark-purple/theme.css'
import Card from "primevue/card";
import Menubar from "primevue/menubar";
import FileUpload from "primevue/fileupload";
app.component('Card', Card)
app.component('Menubar', Menubar)
app.component('FileUpload', FileUpload)
app.mount('#app')
What I tried so far
I searched this issue, but the only exact match for this error is an old closed issue on GitHub regarding the Calendar component: Issue #808. The error in this issue was caused because of the breaking change with the new PrimeVue API. This should not be my case, because it was introduced with V3.1 and I´m using V3.7.
In case the version is the problem I tested different versions of PrimeVue, like 3.1, 3.2, 3.3 but the error still shows. Thats why the actual dependencie is still the latest:
"primevue": "^3.7.0"
Maybe there is an already existing solution on SO or Google, but either my english is to bad to understand or I´m still to fresh at Vue.js to comprehend the problem.
Thanks in advance!
Your usage of app.use() is incorrect:
app.use(
router,
PrimeVue,
PrimeIcons,
store
)
app.use() takes only two arguments:
first argument: the Vue plugin
second argument: the plugin options
Also, PrimeIcons is not a plugin, so that should not be passed to app.use().
Solution
Pass each plugin individually to app.use():
app.use(router)
.use(PrimeVue)
//.use(PrimeIcons) // not a plugin
.use(store)
I'm looking at migrating a Vue 2 app to Vue 3 and ran into a problem. The Vue 2 app used to start with importing a whole lot of components and directives:
// these components register to the global Vue instance
import {ComponentA} from './componenta';
import {directiveA} from './directivea';
// create app (after the components are registered)
new Vue({...})
This worked fine, but when changing this code to Vue3, the app instance is now created instead. This instance isn't actually available when the global directives and components are imported.
What's the recommended way for dealing with this? I can't reorder the imports to the bottom of the file as webpack bundles them always at the top...
The order of imports does not matter in your case - what matters is the order of the JavaScript statements that follow the import section.
You should first create the app instance and only then register your global components to this instance - as explained in https://learnvue.co/2020/08/how-to-register-a-vue3-global-component/
import { createApp } from 'vue'
import PopupWindow from './components/PopupWindow'
import App from "./App.vue"
const app = createApp(App)
app.component('PopupWindow', PopupWindow) // global registration - can be used anywhere
app.mount('#app')
I settled with a solution that imports the app instance before component registration/definition (which occur within the component file) in an attempt to keep the current structure.
import {app} from './instance';
import './components/popupwindow';
import App from './app.vue';
const app = createApp(App)
app.mount('#app')
// instance.js
import {createApp} from 'vue';
const app = createApp();
export {app};
// popupwindow.vue
import {app} from '../instance';
// component registration+definition here (for global components only)
app.component('popup', {
...
}
I have a Vue 2 web app that uses AWS Amplify. I have another app almost exactly like it in every way and it works fine, but for some reason I cannot get this one to work in production.
Locally in dev, everything works just fine.
When I build and launch it with Express, it doesn't load the website. Only when I remove "Amplify.configure(awsconfig);" from src/main.js does it load, but, of course, none of the AWS related functionality (API calls) work.
I get the following error on the console:
Uncaught TypeError: at.a is undefined
56d7 main.js:12
Webpack 6
At main.js line 12 is "Amplify.configure(awsconfig);"
/* eslint-disable */
import Vue from "vue";
import App from "./App.vue";
import router from "./router.js";
import Amplify from "aws-amplify";
// Material plugins
import MaterialKit from "./plugins/material-kit";
import awsconfig from "./aws-exports";
Amplify.configure(awsconfig);
Vue.config.productionTip = false;
Vue.use(MaterialKit);
new Vue({
router,
render: h => h(App)
}).$mount("#app");
The site is very simple and is set up just like my other one that works, so this is very confusing.
Any idea what the issue could be? Let me know if you need any other code snippets.
Where I import Amplify at the top, it shouldn't be
import Amplify from "aws-amplify";
but instead
import { Amplify } from "aws-amplify";
This is strange because my other project does the first version and works fine.