I'm trying to include Bootstrap-Vue in my (fresh) Vue-Project. I've used the Bootstrap-Vue Vue CLI 3 plugin (vue add bootstrap-vue). Starting the app with npm run serve results in the following error:
Failed to compile.
./src/App.vue?vue&type=style&index=0&lang=scss& (./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss&)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
╷
29 │ -webkit-tap-highlight-color: rgba($black, 0); // 5
│ ^^^^^^
╵
node_modules/bootstrap/scss/_reboot.scss 29:37 #import
src/assets/scss/vendors/bootstrap-vue/index.scss 4:9 #import
src/App.vue 20:9 root stylesheet
My main.js looks like this:
import Vue from 'vue'
import './plugins/bootstrap-vue'
import App from './App.vue'
import './assets/app.scss'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
bootstrap-vue.js
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)
app.scss
$body-bg: #000;
$body-color: #111;
#import 'node_modules/bootstrap/scss/bootstrap.scss';
#import 'node_modules/bootstrap-vue/src/index.scss';
I'm pretty sure it has to do with importing some file, but I can't figure it out. I'm using Vue-Version 2.6.11.
I've managed to solve the issue: when including bootstrap-vue via vue add bootstrap-vue, you will be asked three questions:
Use babel/polyfill? → Yes
Use scss? → Yes
Would you like to inject vars, functions and mixins in all SFC components? → If you answer "No" here, it will lead to the described error. Choose "Yes".
The last step that needs to be taken to make Bootstrap work properly, is importing the styles. You can do this by adding the following to your main.js:
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Related
I'm new to use Bootstrap-vue, since I use CDN reference to use it, it work abd perfect for me. Now I try to change webpack version, I face on some issue.
This is CDN version of bvModal.msgBoxOk method
this is webpack version of bvModal.msgBoxOk method
you can see the different in top of "X" button, I don't know which step I missing. The following is my main.ts file
// Import Bootstrap an BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import Vue from 'vue';
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue);
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin);
Any body can help me?
What would be the steps to add a component to Vite with Vue, as an npm package?
I assumed these:
npm install example
open src/App.vue and add import Example from 'example'
in App.vue, in <template>, add <Example />
Is that correct?
I am trying to install and use vue-select like so, but it's not working:
The process you described is correct, but you must also register the component before you can use it (within components: { ... }).
Since you mentioned you're using vue-select, I will use that as an example.
Step #0 - Install
As you've already done, ensure your project is initialized (npm init), then run yarn add vue-select / npm i vue-select.
Step #1 - Initialize
In your main.js, import and register with:
import VSelect from 'vue-select';
Vue.component('v-select', VSelect);
/* rest of your Vue initialization here */
Step #2 - Use Component
<v-select :options="[{label: 'Canada', code: 'ca'}]"></v-select>
You'll also need to import the stylesheet in your CSS, with:
#import 'vue-select/src/scss/vue-select.scss';
Real Example
If you want to see a full example, I am using this package in one of my projects, I'm registering the component in my main.js and using it ThemeSelector.vue.
Also, if your project is large and/ or you're only using this component in one place, then a better approach would be to import it into the component that's using it. This is done in a similar way, but you must also register it under components: { ... } for it to be accessible within your <template>.
Your screenshot shows you're importing vSelect in a <script> block, and expecting it to be automatically registered for the component's template. That would only work in a <script setup> block.
However, your GitHub repo (which seems to be different from the screenshot you posted) reveals other issues in your code:
You're using Vue 2 code to globally register the v-select component in your Vue 3 app. In Vue 3, global component registration is done from the application instance (i.e., returned from createApp()).
// main.js
import VSelect from 'vue-select';
// Vue.component('v-select', VSelect); ❌ Vue 2 code
import { createApp } from 'vue'
import App from './App.vue'
createApp(App)
.component('v-select', VSelect) ✅
.mount('#app')
You're using #import (CSS syntax) to import your SCSS file in the <script> block. Either move the CSS into a <style lang="scss"> block; or remove the # prefix, which would create a valid import for <script>.
<script setup>
// #import 'vue-select/src/scss/vue-select.scss'; ❌ The # prefix is invalid in <script>
import 'vue-select/src/scss/vue-select.scss'; ✅
</script>
<!-- OR -->
<style lang="scss">
#import 'vue-select/src/scss/vue-select.scss';
</style>
Your project is missing sass, which is required to process SCSS files. You can install it as a dev dependency with:
$ npm i -D sass
Here's a demo with the fixes pointed out above.
i want add a vue panel in my project : vue-black-dashboard
in documentation :
Vue Black Dashboard is built as Vue plugin so you can simply import it
and use it.
import Vue from 'vue';
import DashboardPlugin from '#/plugins/blackDashboard'
Vue.use(DashboardPlugin);
but i dont know where paste vue-black-dashboard folder
how i can import it to my project
thanks
If you want to import it and use in a local component, just import it in component.
<script>
import Vue from 'vue';
import DashboardPlugin from '#/plugins/blackDashboard'
Vue.use(DashboardPlugin);
export default {
}
</script>
If you want to import it and use globally, just import it in main.js.
import Vue from 'vue';
import DashboardPlugin from '#/plugins/blackDashboard'
Vue.use(DashboardPlugin);
hello thanks for your answer
import DashboardPlugin from '#/plugins/blackDashboard'
where is the # in this address ?
i want use this template in specify route of my project
when i import it in main.js
This dependency was not found:
#/plugins/blackDashboard in ./src/main.js
To install it, you can run: npm install --save
#/plugins/blackDashboard
How's your plugin file look like? I have a similar issue with having plugins in separate files in /plugins directory and importing them to main.js
What I'm trying to achieve is better structure of plugins to keep them in separate files in folder plugins, rather than storing all the code in main.js
Not sure is it allowed or is it a good practice.
Plugins folder: plugins/toastification.js
import Vue from 'vue'
import Toast from 'vue-toastification'
import 'vue-toastification/dist/index.css'
const options = {
position: 'bottom-right'
}
Vue.use(Toast, options)
// export default new Toast() - got error while exporting but it works somehow without export default I don't know why
Part of main.js
// plugins
import vuetify from './plugins/vuetify'
import i18n from './plugins/i18n'
import toastification from './plugins/toastification'
import logger from './plugins/logger'
new Vue({
vuetify,
i18n,
toastification,
logger,
render: h => h(App)
}).$mount('#app')
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
}
// ...
}
I have a project on github, I work on it at home where it works fine, but when I pull it onto another pc and run the necessary commands it fails on the module build.
main.js:
import Vue from 'vue'
import App from './App'
import router from './router'
import SuiVue from 'semantic-ui-vue';
import './assets/semantic/dist/semantic.min.css'
import './assets/sass/main.scss'
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App)
});
Vue.use(SuiVue);
The invalid css error I get when I run npm run dev:
Module build failed:
import Vue from 'vue'
^
Invalid CSS after "i": expected 1 selector or at-rule, was "import Vue from 'vu"
in /Users/Developer/www/profile-site/src/main.js (line 1, column 1)
# multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
Not sure if I am missing something somewhere when I pull in the project.
Here is the actual repository: https://github.com/RduPlessis/profile-site