I'm trying to get bootstrap-vue installed in my vue-cli project.
I read here https://bootstrap-vue.js.org/docs :
Then, register BootstrapVue in your app entry point:
import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
// Install BootstrapVue
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)
And import Bootstrap and BootstrapVue css files:
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Alternatively you can import Bootstrap and BootstrapVue scss files in a custom SCSS file:
#import 'node_modules/bootstrap/scss/bootstrap';
#import 'node_modules/bootstrap-vue/src/index.scss';
Make sure to import the custom.scss file in your app entry point:
import './custom.scss'
Be sure to #import or define your custom variable values before including Bootstrap SCSS (bootstrap.scss), and include BootstrapVue SCSS (bootstrap-vue.scss) after that to ensure variables are set up correctly.
Place all of the SCSS #imports into a single SCSS file, and import that single file into your project. Importing individual SCSS files into your project will not share variable values and functions between files by default.
Webpack and Parcel support prepending the scss modules with tilde paths (~) when importing from a scss file:
// Webpack example
#import '~bootstrap';
#import '~bootstrap-vue';
// Parcel example
#import '~bootstrap/scss/bootstrap';
#import '~bootstrap-vue/src/index.scss';
For more details how to configure asset loading and how modules are resolved, please consult the module bundlers documentation.
Well, where do I need to put all this? xD Im really new to vue.js. Is the main.js the entry point?
And if so, do I need to put all this there?
This is what my main.js looks like:
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import Routes from './routes'
import App from './App.vue'
import Vue from 'vue'
import './style/customColor.scss';
//import 'regenerator-runtime';
import store from "./store/store";
import { USER_ROLECHECK } from './store/actions/user'
import { REQ_ADMIN_ROLE } from "./utility/namespaces";
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
Vue.use(VueResource);
Vue.use(VueRouter);
Vue.config.devtools = true; //this line should be removed in the actual live build!
const router = new VueRouter({
routes: Routes,
mode: 'history'
})
router.beforeEach((to, from, next) => {
if(to.meta.reqAuth){
if(store.getters.isAuthenticated){
if(to.meta.reqAdmin){
store.dispatch(USER_ROLECHECK, REQ_ADMIN_ROLE).then(() =>{
next();
}).catch(() =>{
next({path: '/'})
})
}else{
next();
}
}else{
next({path: '/login'});
}
}else{
next();
}
})
new Vue({
el: '#app',
router,
store,
render: h => h(App),
})
How do I need to update this, what must it look like for the integration to worK?
Yes, in a vue-cli app, the main.js file is your apps entry point.
What you need to place in your main.js is the following:
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
// Install BootstrapVue
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
// Only needed if you want to use the bootstrap icons. Be aware these are currently in alpha
Vue.use(IconsPlugin)
// Import Bootstrap and Bootstrap-Vue css
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
If you want to use SCSS you will need to create a new styles.scss (the name doesn't matter) file, place these two lines in it
#import 'node_modules/bootstrap/scss/bootstrap';
#import 'node_modules/bootstrap-vue/src/index.scss';
and then import styles.scss in your main.js instead of the css files:
// Replace these
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
// With this
import './path/to/your/styles.scss'
Related
I've set up unplugin-vue-components which now auto-imports all vue components from src folder but it won't import js files (f.e. store.js which is located in src/composables). It also doesn't import node modules like axios. Any idea how to do it? I'd like it to work like Nuxt 3 auto import (which is awesome).
github link: unplugin-vue-components
This is my vite.config.js:
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
export default defineConfig({
plugins: [
vue(),
Components({
dirs: ['src'],
extensions: ['vue', 'js']
})
],
})
unplugin-vue-components plugin is meant to import components. If you want to import JS files (and more specifically, JS variables) you can use this plugin: https://github.com/antfu/unplugin-auto-import
Beside the ability to import popular library like axios, you can also add your local ones using dir porperty.
// Auto import for module exports under directories
// by default it only scan one level of modules under the directory
dirs: [
// './hooks',
// './composables' // only root modules
// './composables/**', // all nested modules
// ...
],
Refer to readme for more information.
I started a new Laravel project and now Laravel Mix has been replaced with Vite.
I've installed Alpine.js and launched it in the bootstrap.js file but, Alpine.js not recognized in the Laravel blade files and the other JS files.
vite.config
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import path from "path";
export default defineConfig({
plugins: [
laravel([
'resources/css/app.css',
'resources/js/app.js',
]),
],
resolve:{
alias:{
'~alpine':path.resolve(__dirname,'node_modules/alpinejs'),
}
}
});
enter image description here
app.js
import './bootstrap';
import alpine from "./alpinejs/src/alpine";
console.log(alpine.version);
enter image description here
I add Alpine like the following.
bootstrap.js
import _ from 'lodash';
window._ = _;
import $ from 'jquery';
window.jQuery = window.$ = $
import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();
Hi i have a situation something like this
I have 2 files
main.js
utils.js
main.js
import { createApp } from 'vue'
import Utils from "./utils.js"
import router from "...."
import VueCookies from 'vue-cookies'
const app = createApp(App);
app.use(router);
app.use(VueCookies)
app.use(Toast,Utils.toastConfig())
app.mount('#app')
utils.js
import Vue from 'vue'
export default{
setCookie(params){
Vue.$cookies.set(params.name, params.value)
}
...
// so on related to Vue.$cookies
}
Note: above file usage is in multiple places, changing everywhere is not feasible now as we are migrated from vue2 to vue3
Question: Vue is undefined in utils.js how to make it work without much code changes
hope you are well!
I am working in a project CRUD web application that handles user management. Create user, edit user, delete user.
First I set up my project install VueJS after that installed vue-bootstrap make import in file main.js.
For mocking the Backend I have used :
NPM install -g json-server
After that, create a new file called db.json that handles users in the root of a project.
I run command json-server --watch db.json to make record available.
http://localhost:3000/users
I have installed axis for us to be able to send and receive data from our backand.
So I have run command npm install axios.
But after it how I have import axios in file main.js, but I am not confident if is the right way?? Thanks
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
import axios from 'axios'
//Import Bootstrap an BootstrapVue CSS files (order is important)
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue);
Vue.use(IconsPlugin);
Vue.config.productionTip = false
Vue.use({
install (Vue) {
Vue.prototype.$api = axios.create({
baseURL: 'http://localhost:8000/users/'
})
}
})
new Vue({
router,
render: h => h(App)
}).$mount('#app')
<script>
import axios from 'axios';
export default {
data() {
return {
posts: [],
errors: []
}
},
// Fetches posts when the component is created.
created() {
axios.get(`http://jsonplaceholder.typicode.com/posts`)
.then(response => {
// JSON responses are automatically parsed.
this.posts = response.data
})
.catch(e => {
this.errors.push(e)
})
}
}
</script>
Do the same as shown in the script example, it will work
Fetching data from external sources is considered as a "side-effect". Thus, according to me, you should perform such side effects inside a "mounted" life cycle.
Further, to make things more better, you can create an abstraction layer for fetching data from external APIs inside "mounted" life cycle.
To make things simple on your end, you can also consider Vue-Query.
the easiest way is to create a folder known as axios in your src then add index.js in it then put this code:
// axios/index.js
import axios from "axios";
export default axios.create({
baseURL: "http://127.0.0.1:8000/api/", //your base url here
});
then import this file as axios in your app main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
import axios from "#/axios"; //import your custom axios
I try using Vue 3, but I look can't using Vue.use(exampleplugin) again.
I using command vue add bootstrap-vue after generate vue create project. And on plugin bootstrap-vue warning with code:
import Vue from "vue";
import BootstrapVue from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
Vue.use(BootstrapVue);
Output warning terminal:
warning in ./src/plugins/bootstrap-vue.js
"export 'default' (imported as 'Vue') was not found in 'vue'
warning in ./node_modules/bootstrap-vue/esm/utils/vue.js
"export 'default' (imported as 'Vue') was not found in 'vue'
What's wrong with that? And how do I use vue 3 to add plugin bootstrap-vue?
Bootstrap Vue is not yet ready for Vue 3.
To answer part of your question, Vue 3 changes the method for instantiating the application instance, including how plugins are registered.
For example...
import { createApp } from 'vue';
import Router from './router/Router';
createApp({/* options */}})
.use(Router)
.mount('#app');
You can read more about this at the official docs.
https://v3.vuejs.org/guide/instance.html
https://v3-migration.vuejs.org
For vue 3 you can use
bootstrap-vue-3
Install: npm i bootstrap-vue-3
Config:
import { createApp } from "vue";
import App from "./App.vue";
import BootstrapVue3 from "bootstrap-vue-3";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue-3/dist/bootstrap-vue-3.css";
const app = createApp(App);
app.use(BootstrapVue3);
app.mount("#app");