How can I work with bootstrap-vue on Laravel, using Laravel 8, Jetstream and InertiaJS?
import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
// 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)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)
I don't know where and how to add the app.js file.
app.js:
require('./bootstrap');
// Import modules...
import { createApp, h } from 'vue';
import { App as InertiaApp, plugin as InertiaPlugin } from '#inertiajs/inertia-vue3';
import { InertiaProgress } from '#inertiajs/progress';
const el = document.getElementById('app');
createApp({
render: () =>
h(InertiaApp, {
initialPage: JSON.parse(el.dataset.page),
resolveComponent: (name) => require(`./Pages/${name}`).default,
}),
})
.mixin({ methods: { route } })
.use(InertiaPlugin)
.mount(el);
InertiaProgress.init({ color: '#4B5563' });
This is my css.js.
Here add the CSS libraries.
#import 'tailwindcss/base';
#import 'tailwindcss/components';
#import 'tailwindcss/utilities';
#import 'bootstrap/dist/css/bootstrap.css';
#import 'bootstrap-vue/dist/bootstrap-vue.css';
As I can see from your configuration. You are using InertiaJS with Vue3. Right now, BootStrap-Vue components only works with Vue2 (info). So you need first to downgrade InertiaJS from Vue3 to Vue2. With npm
npm uninstall #inertiajs/inertia-vue3 vue #vue/compiler-sfc vue-loader
npm install #inertiajs/inertia-vue vue vue-template-compiler vue-loader
It seems weird to uninstall and reinstall vue and vue-loader, but is the easiest way to properly update the dependencies.
Now you need to put in your app.js.
import Vue from 'vue';
import { createInertiaApp } from '#inertiajs/inertia-vue';
import BootstrapVue from 'bootstrap-vue';
Vue.use(BootstrapVue);
createInertiaApp({
resolve: (name) => require(`./Pages/${name}`),
setup({ el, app, props }) {
new Vue({
render: (h) => h(app, props),
}).$mount(el);
}
});
The app.css does not need any modification. Unless you need to modify and theme Bootstrap, in that case you must change to SASS.
Related
I want to use vue-device-detector in my project. in this plugin docs it says to register with Vue.use(device) so how am i supposed to do this with inertiajs createInertiaApp.
App Versions:
Laravel: 9.44.0
Vue: 3.2.31
inertiajs/inertia: 0.11.0
inertiajs/inertia-vue3: 0.6.0
I have tried .use(device) on createApp in app.js. getting this error in console
main.ts:87 Uncaught (in promise) TypeError: Cannot set properties of undefined (setting '$device').
Project is created with laravel jetstream starter kit.
EDIT 1:
Here is my app.js code. i am don't know how i can register plugin here. (Because inertia mount the app here so i suppose global plugin also needs to be registered here!!)
import './bootstrap';
import '../css/app.css';
import { createApp, h } from 'vue';
import { createInertiaApp } from '#inertiajs/inertia-vue3';
import { InertiaProgress } from '#inertiajs/progress';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props) })
.use(plugin)
.use(ZiggyVue, Ziggy)
.mount(el);
},
});
InertiaProgress.init({ color: '#4B5563' });
PS: Thank you for reading my question, and please excuse any errors
I have an application that is based on larvel blades.
In the blades I want to use vueJs3 without build, but to insert vue components.
I'm getting an error in the console: Uncaught ReferenceError: createApp is not defined
I followed these steps:
npm install
npm install vue
npm install vue-loader
npm i #vitejs/plugin-vue
in the vite.config.js file I added
import vue from '#vitejs/plugin-vue'
export default {
plugins: [vue()]
}
I created the file example.vue
in the app.js file I added
import { createApp } from "vue";
import example from "./example.vue";
npm run dev
I use:
Laravel 9.19
vite 2.9.11
vueJs 3
vue-loader 17.0.0
My files:
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '#vitejs/plugin-vue'
export default defineConfig({
plugins: [
vue(),
laravel([
'resources/css/app.css',
'resources/js/app.js',
]),
],
});
resources/js/app.js
import './bootstrap';
import { createApp } from "vue";
import example from "./example.vue";
welcome.blade
<body>
<div id="app">
<example/>
</div>
#vite('resources/js/app.js')
</body>
<script>
var app = createApp({
components: {
example
},
data() {
return {
message: "Hello world"
}
}
})
app.mount("#app")
</script>
I am trying to integrate Highcharts with app.js in Laravel 8 with Vue and Inertia. I am trying to figure out how to pass HighchartsVue. I am trying to pass it to the use function for the createApp. However, I can't access it in the templates.
App.js
require("./bootstrap");
// Import modules...
import { createApp, h } from "vue";
import HighCharts from ""
import {
App as InertiaApp,
plugin as InertiaPlugin,
} from "#inertiajs/inertia-vue3";
const el = document.getElementById("app");
createApp({
render: () =>
h(InertiaApp, {
initialPage: JSON.parse(el.dataset.page),
resolveComponent: (name) => require(`./Pages/${name}`).default,
}),
})
.mixin({ methods: { route } })
.use(InertiaPlugin)
.mount(el);
My template that tries to access the Vue Template. I haven't included the entire template here.
Vue Template
<div>
<highcharts :options="indexOptions"></highcharts>
</div>
For a global registration:
After you have installed "highcharts-vue" using:
npm install highcharts-vue
Register it globally as a plugin in your app.js with:
import HighchartsVue from 'highcharts-vue'
Next register it as a plugin in your vue object with:
Vue.use(HighchartsVue)
Please see the documentation here for more detailed instructions (and how to register it locally in the component).
After installing, your app.js would look something like this:
require("./bootstrap");
// Import modules...
import { createApp, h } from "vue";
import HighchartsVue from 'highcharts-vue'
import {
App as InertiaApp,
plugin as InertiaPlugin,
} from "#inertiajs/inertia-vue3";
Vue.use(HighchartsVue);
const el = document.getElementById("app");
createApp({
render: () =>
h(InertiaApp, {
initialPage: JSON.parse(el.dataset.page),
resolveComponent: (name) => require(`./Pages/${name}`).default,
}),
})
.mixin({ methods: { route } })
.use(InertiaPlugin)
.mount(el);
I followed a tutorial on youtube for Vuetify setup with laravel. I managed to set up the project successfully, i.e. install all dependencies as specified in the tutorial. Although in the final step, NPM watch, I get the following error in the console;
Uncaught TypeError: _plugins_vuetify__WEBPACK_IMPORTED_MODULE_1__.default is not a constructor
vuetify.js code:
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)
The problem is exactly lies where you exporting default Vuetify.
The best practice to this is to import Vuetify in the separate file in the plugins for example so I will keep this up with this practice.
So after running:
$ npm install vuetify --save
// OR
$ yarn add vuetify
to install Vuetify on existing applications through the Webpack or creating a new Vue.js project just like this:
$ vue add vuetify
You should follow the below instruction.
Vuetify v1.5.*
If you are using Vuetify v1.5.* follow the below instruction (otherwise, skip this to the next one)
First of all you don't have to export Vuetify in this version and you just have to import Vuetify and tell Vue to use it. So the plugins/vuetify.js should be like this (You can also directly do the following in your main.js or app.js):
// /plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
NOTE: You can also define some setting in the above file within the Vue.use and pass it as an object just like this:
Vue.use(Vuetify, {/*Your setting goes here*/})
And then import it like below in your main.js or app.js:
// main.js or app.js
import Vue from 'vue'
import 'vuetify/dist/vuetify.min.css' // You also need to import Vuetify CSS file and also ensure you are using css-loader
import './plugins/vuetify' // We have assuemed the above snippet is in the plugins directory and it lies next to main.js or app.js
...
new Vue({
el: "#app",
router,
store,
render: h => h(App),
})
Vuetify v2.*.*
After adding it through your Webpack you need to locate webpack.config.js and add the following setting into your Webpack to configure the loader:
// webpack.config.js
module.exports = {
rules: [
{
test: /\.s(c|a)ss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
// Requires sass-loader#^7.0.0
options: {
implementation: require('sass'),
fiber: require('fibers'),
indentedSyntax: true // optional
},
// Requires sass-loader#^8.0.0
options: {
implementation: require('sass'),
sassOptions: {
fiber: require('fibers'),
indentedSyntax: true // optional
},
},
},
],
},
],
}
After that just create a plugin directory and then vuetify.js file like and add the following into it:
// /plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)
Then navigate to your main entry (main.js or app.js) and import it like below:
// main.js or app.js
import Vue from 'vue'
import vuetify from '#/plugins/vuetify' // We have assumed the above snippet is in the plugins directory and it lies next to main.js or app.js
new Vue({
vuetify,
}).$mount('#app')
NOTE: This much more sound like an instruction but for more information you can visit the documentation here.
I'm trying to use Vue on my laravel project.
And import vuetify for that project.
But it appends all css inline on the project.
My app.js is avobe:
window.Vue = require('vue');
//import Vuetify from 'vuetify'
import VueRouter from 'vue-router'
import {store} from './store/store'
import vuetify from './plugins/vuetify' // path to vuetify export
import 'vuetify/dist/vuetify.min.css' // Ensure you are using css-loader
import Master from './Master'
import router from './router'
Vue.use(VueRouter)
Vue.config.productionTip = false;
router.beforeEach((to, from, next) => {
if(to.matched.some(record => record.meta.requiresAuth)){
if(store.getters.loggedIn){
next()
}else{
next({name: 'login'})
}
}else{
if(store.getters.loggedIn){
next({name: 'dashboard'})
}else{
next()
}
}
})
// use the plugin
const app = new Vue({
el: '#app',
router: router,
store: store,
vuetify,
components: {Master},
template: "<Master />"
});
My webpack.mix.js:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
And here's the how code compiles itself:
How can I use vuetify codes on "blabla.css" file?
remove your vuetify.min.css in your app.js
and move that in your app.scss like this
#import '~vuetify/dist/vuetify.min.css';