I'm using bootstrap-vue and I've noticed b-tabs renders differently depending on the Vue build that I import:
If I import vue it renders correctly:
https://codesandbox.io/s/vue-template-77mzg
But if I import vue/dist/vue.common or vue/dist/vue It renders wrongly:
https://codesandbox.io/s/vue-template-y0t15
Also, it doesn't happen with other components, like b-navbar-nav. They render correctly regardless of the vue build I import.
I'd like to understand why does it happen, since I need to import a vue version that includes the compiler because some components need it.
Thanks!
When importing a specific variant of Vue (i.e. commonjs vs ES), you need to set up an alias in webpack to ensure that BootstrapVue (and other dependants such as PortalVue) use the same build of Vue (as BootstrapVue also imports from vue).
See the docs on setting up aliases (so you can just import Vue from 'vue'):
https://bootstrap-vue.js.org/docs#aliasing-vue-import
i.e. for Webpack config
module.exports = {
// ...
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js'
}
}
}
Related
I am building my first NuxtJs project and I am also using Vue Class Component to write my components as classes.
I am facing trouble in accessing the beforeRouteEnter component hook after applying Vue Class Component (it doesn't get called anymore). So I found the documentation about registering aditional hooks when using this library, but I couldn't figure it out where to place the import statement in my NuxtJs structure.
I have this file (the same from docs):
// class-component-hooks.js
import Component from 'vue-class-component'
// Register the router hooks with their names
Component.registerHooks([
'beforeRouteEnter',
'beforeRouteLeave',
'beforeRouteUpdate'
])
And I would appreciate some help on how to set it in my NuxtJs project:
// Where should I place this?
import './class-component-hooks'
It tourned out to be quite simple:
I have placed the .js file inside a plugins folder:
// plugins/class-component-hooks.js
import Component from 'vue-class-component'
// Register the router hooks with their names
Component.registerHooks([
'beforeRouteEnter',
'beforeRouteLeave',
'beforeRouteUpdate'
])
Then at my nuxt.config.js file, I placed this line:
...
plugins: [
{ src: "~/plugins/class-component-hooks.js", mode: "client" },
],
...
I am building a standalone Vue component and using it in another Vue project.
Build component:
vue build --target wc --inline-vue --name user-menu user-menu.vue
It's a simple component so far without functionality, just markup.
Then, in the main project in package.json:
"devDependencies": {
"user-menu": "git+https://........user-menu.git",
Then, in the main.js:
import Vue from "vue";
import UserMenu from "user-menu"
....
Vue.use(UserMenu);
const app = new Vue(config).$mount("#root");
window.app = app;
Vue.use(UserMenu);
And it says:
user-menu.js?e2ea:1446 Uncaught ReferenceError: Vue is not defined
on a row
module.exports = Vue;
But the Vue CLI 3 documentation says that:
In web component mode, Vue is externalized. This means the bundle will
not bundle Vue even if your code imports Vue. The bundle will assume
Vue is available on the host page as a global variable.
Any idea how to fix that?
Finally I came to the following solution: the component should not be built at all. Source files are enought to be imported like this:
import UserMenu from "user-menu/user-menu";
Pay attention that the path should point at the imported vue file, not just to the folder. But the extension "vue" must be skipped.
The final application will build it all together.
I'm building a Nuxt app with Vuetify buildModule setup and want to make a number of v-cols sortable via VueDraggable (in my case, I built and added a super small Nuxt plugin which binds a global draggable component from the default export from VueDraggable). The v-cols should be wrapped with a v-row, so I'm using the draggable component with tag="v-row". This works well when running the dev server (nuxt-ts in my case since I'm using Nuxt with typescript support), but fails when building and running in production mode.
To illustrate the issue, here is some info on what's happening. My source is as follows (i.e. I use Pug):
In development mode, my v-row is rendered correctly in the DOM from Vuetify:
But when building and running in production mode, the draggable component literally renders v-row as the DOM tag instead of it going through rendering/parsing via Vuetify:
Does anyone have any idea on how to identify the root cause and how to resolve it here? I can likely hack my way around this problem for now, but want to know if this is a Nuxt bug or if anyone has solved this in any other way.
Just came across this issue, it turns out you need to register the VRow component globally:
import { VRow } from 'vuetify/lib';
Vue.component("v-row", VRow)
in your main.js
If the problem is caused by the vueDraggble registration try following:
Create <project-root>/plugins/draggable.ts
import draggable from 'vuedraggable';
import Vue from 'vue';
Vue.component('draggable', Draggable);
And remove
import draggable from 'vuedraggable'
from your .vue files.
and in your nuxt.config.js add
export default {
// ...
plugins: [
{ src: '~/plugins/draggable.ts', mode: 'client' }
]
//...
}
What is the correct way of loading vuetify into a package that i use in a vuetify project?
When serving projects it all seems to work fine but when i build the project i've got some issues with the css/sass
things i've tried:
With vuetify loader: the css is loaded twice so i can't overwrite sass variables
Without vuetify loader: the package doesn't have the vuetify css, so it looks horrible
Without vuetify loader with vuetify.min.css: the css is loaded twice so i can't overwrite sass variables, and the loaded css is all the css so it's huge
My package is called vuetify-resource, and this is the source code of the index.js (without the vuetify loader) At this point everything works on npm run serve But when i build the package doesn't have "access" to the vuetify css.
import Vue from 'vue';
import Vuetify from 'vuetify';
import VuetifyResourceComponent from './VuetifyResource.vue';
Vue.use(Vuetify);
const VuetifyResource = {
install(Vue, options) {
Vue.component('vuetify-resource', VuetifyResourceComponent);
},
};
export default VuetifyResource;
To solve my issue i had to do a couple of things.
Make peer dependencies of vuetify and vue
add vuetify to the webpack externals, so when someone uses the package, the package uses that projects vuetify
not longer import vue and vuetify in the index.js it's not needed, the project that uses the package imports that
import the specific components that you use in every .vue file
for example:
Vue.config.js
module.exports = {
configureWebpack: {
externals: {'vuetify/lib': 'vuetify/lib'},
},
};
index.js
import VuetifyResourceComponent from './VuetifyResource.vue';
const VuetifyResource = {
install(Vue, options) {
Vue.component('vuetify-resource', VuetifyResourceComponent);
},
};
export default VuetifyResource;
part of the component.vue
import { VDataTable } from 'vuetify/lib';
export default {
name: 'vuetify-resource',
components: {
VDataTable
},
Step 4 in Ricardo's answer is not needed if you use vuetify-loader, it will do the job for you.
And I would modify step 2 to also exclude Vuetify's styles/css from your bundle. If you don't exclude them you can run into styling issues when the Vuetify version differ between your library and your application.
Use a regular expression in vue.config.js like this: configureWebpack: { externals: /^vuetify\// }. That way, only your own styles are included in the library bundle.
I am a beginner in the world of Vue, so please bear with my foolish question(s).
I have a boilerplate code for a Vue project which I cloned from:
Vue Enterprise Boilerplate
I wanted to use Vuetify components, so I followed the following steps:
1. Cloned the vue-enterprise-boilerplate
2. npm install vuetify --save
3. In my main.js I added the vuetify dependency like:
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);
4. I am using Vue CLI 3 (which comes with the boilerplate), also I have installed the CCS Loader.
5. Now in my app.vue, I have a simple button like:
<v-app>
<v-btn color="primary">Test</v-btn>
</v-app>
But when I run the app, I only see the outline of the button, but the styles are missing. Here is a screenshot below:
Also here is the dev-tools snapshot:
As you can see, the vuetify.min.css is being referenced, I am unable to debug why this is not behaving as per the Vuetify guides.
What steps am I missing?
What fixed the issue for me was the adding of class .v-application at the top most html tag (or the first one after template tag). Usually if I add <v-app> it all works but for some reason using vuitify 2.0.4 this didn't worked (may be because I'm not using vue-cli and webpack but parcel.js).
So adding this class solved the same issue for me.
EDIT
Actually I just found why v-app was ignored. Since I'm using vuetify 2.0.4. without vue-cli and webpack I need to include the vuetify components by my self like so:
import Vue from 'vue'
import Vuetify, {
VCard,
VImg,
VCardTitle,
VBtn,
VCardActions,
VCardText,
VProgressCircular,
VSpacer,
VDialog,
VDivider,
VAlert,
VApp,
} from 'vuetify/lib'
Vue.use(Vuetify, {
components: {
VCard,
VImg,
VCardTitle,
VBtn,
VCardActions,
VCardText,
VProgressCircular,
VSpacer,
VDialog,
VDivider,
VAlert,
VApp,
},
})
import 'material-design-icons-iconfont/dist/material-design-icons.css';
export default new Vuetify({})
Which is then imported in the vue app like this:
import Vue from "vue";
import vuetify from './src/vuetify'
import VocabularyApp from "./src/App.vue";
new Vue({
vuetify,
render: h => h(VocabularyApp)
}).$mount('#app-tutor');
So v-app wasn't working as I didn't included it in the list of components that I need for my app to work. More you can find here.
Welcome to the vuetiful world of vue.
You are looking into the shadow dom, please inspect the button element not the div element inside button element. The parent button element of the div will have classes like .primary .error based on the prop you give.
See the screenshot:
I hope this helps.
In my case I used stylus and had the css.requireModuleExtension = false option in vue.config.js. Styles just didn't load. Switching it to the true or removing this option did the trick.
// vue.congif.js
module.exports = {
// ...
css: {
// ...
requireModuleExtension: true
}
// ...
}