I am getting below error.
Uncaught Error: Bootstrap's JavaScript requires jQuery. jQuery must be
included before Bootstrap's JavaScript.
app.js
require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import VueAxios from 'vue-axios';
import axios from 'axios';
Vue.use(VueAxios, axios);
import App from './App.vue';
import Login from './components/Login.vue';
import Register from './components/Register.vue';
import Activity from './components/Activity.vue';
import SelectPersons from './components/SelectPersons.vue';
const routes = [
{
name: 'Login',
path: '/',
component: Login
},
{
name: 'Register',
path: '/register',
component: Register
},
{
name: 'Activity',
path: '/activity',
component: Activity
},
{
name: 'SelectPersons',
path: '/selectpersons',
component: SelectPersons
}
];
const router = new VueRouter({ mode: 'history', routes: routes});
new Vue(Vue.util.extend({ router }, App)).$mount('#app');
bootstrap.js
window._ = require('lodash');
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
try {
window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');
} catch (e) {}
window.Vue = require('vue');
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
/**
* Next we will register the CSRF Token as a common header with Axios so that
* all outgoing HTTP requests automatically have it attached. This is just
* a simple convenience so we don't have to attach every token manually.
*/
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allows your team to easily build robust real-time web applications.
*/
// import Echo from 'laravel-echo'
// window.Pusher = require('pusher-js');
// window.Echo = new Echo({
// broadcaster: 'pusher',
// key: 'your-pusher-key'
// });
Here is the file that loads every vue component or blade template pages.
<html>
<head>
{{Html::style('/css/bootstrap.css')}}
{{Html::style('/css/style.css')}}
{{Html::script('/js/bootstrap.js')}}
</head>
<body>
<div id="app">
</div>
<script src="{{asset('js/app.js')}}"></script>
</body>
</html>
I am using Laravel with vue. Can anybody help me to solve this issue?
Thanks
Your app.js contains jquery. so do as the error says and load bootstrap after jquery.
<html>
<head>
{{Html::style('/css/bootstrap.css')}}
{{Html::style('/css/style.css')}}
</head>
<body>
<div id="app">
</div>
<script src="{{asset('js/app.js')}}"></script>
{{Html::script('/js/bootstrap.js')}}
</body>
</html>
Bootstrap required jQuery to run some of its features like the dropdown. the error says "Uncaught Error: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.". So first, require the jquery library, then next is the bootstrap.min.js or bootstrap.js. Please feel free to comment if you have any problem with this. And one more thing, it is better to place your all JS files before </body>.
Try this
<html>
<head>
{{Html::style('/css/bootstrap.css')}}
{{Html::style('/css/style.css')}}
</head>
<body>
<div id="app">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
{{Html::script('/js/bootstrap.js')}}
<script src="{{asset('js/app.js')}}"></script>
</body>
</html>
Related
I am creating a Laravel project which embed many Vue components (using webpack+mix.js).
-In app.js I have:
import './bootstrap';
require('#fortawesome/fontawesome-free/js/all.js');
import Vue from "vue";
import router from './Router'
import store from './Store/index'
import vuetify from './vuetify.js'
import 'vuetify/dist/vuetify.min.css'
window.Vuetify = require('vuetify');
Vue.use(vuetify);
//import cartComponent from "./components/cartComponent";
// import cart from "./components/Cart";
import 'vuetify/dist/vuetify.min.css'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)
import BTabs from 'bootstrap-vue'
import datePicker from "vue-bootstrap-datetimepicker";
//
Vue.use(datePicker);
Vue.use(BTabs)
const opts = {}
const my_components = document.getElementsByClassName("my-component-class-wrapper");
for (var i = 0; i <= my_components.length+1; i++) {
new Vue({
el: '#app' + i,
vuetify, //not all pages require it !
store, // *********************now store is shared between all the instances
router,
// opts,
components: {
cartComponent: () => import(/* webpackPrefetch: true */"./components/cartComponent"),
addToCart: () => import('./components/addToCart'), //in productDetail: <add-to-cart>
//cartComponent, //cart icon in navbar
cart: () => import('./components/Cart'),//cartDetails page
info: () => import('./components/Info') //info page
},
data: {},
async created() { //if removed the cart icon will disapear
store.dispatch('fetchProducts').then(_ => { //execute fetchProducts in vuex.
}).catch((error) => console.log(error))
},
validations: {}
});
}
I am using looping, so I can share one store between elements.
The problem is the slowness of the webpages to finish loading. And I discovered that #app0,#app1, .etc. are All carried to every page I visit, getting a message saying:Cannot find element: #app1,#app2,...
besides, not all the pages are using vuetify; another point, I don't need to fetch all the products in every page (async created()).
Is there a way to fetch elements on demand depending on the page I visit ? maybe that will solve the slowness of the pages.
The way the vue component are embedded in pages are :
-page1.blade.php :
<body>
<div id="app0" class="my-component-class-wrapper">
<info></info>
</div>
<script defer src="{{ mix('js/app.js') }}"></script>
</body>
-page2.blade.php:
<body>
<div id="app1" class="my-component-class-wrapper">
<add-to-cart></add-to-cart>
</div>
<script defer src="{{ mix('js/app.js') }}"></script>
</body>
I have the Laravel/Inertia app and I use VueSweetAlert2 imported globally in app.js.
It works well on every component. But now, I want to use on the component and I can't find working solution for sweetalert. I've tried several ways, but sweetalert still doesn't work.
I tried:
const swal = inject($swal),
Import VueSweetAlert2 from 'vue-sweetalert2';
Import Swal from 'vue-sweetalert2';
Import swal from 'vue-sweetalert2';
and some other ways.
How can I use SweetAlert in <script setup>???
Thanks. Pato
<script setup>
import { inject } from 'vue'
const swal = inject('$swal')
function showDialog(event) {
swal.fire({
icon: 'success',
title: 'done',
showConfirmButton: false,
timer: 1500
});
}
</script>
Reference from
calling SweetAlert2 inside Async method in VUE 3
I am using Laravel. the Frontside is developed by Blade and vue.
After Installing "vuetify". The other component which I have been using happened an error.
I don't know what is going on. the component doesn't be shown in the div.
when "const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');" is removed from mix.webpackconfig, the error from Calendar disappeared.
Is that related to installing "vuetifty"?
ERROR
[Vue warn]: Error in render: "TypeError: Cannot read property 'lang' of undefined"
found in
---> <VCalendarMonthly>
<VCalendar>
<ACalendar> at resources/js/components/ACalendar.vue
<Root>
app.js
Code
window.Vue = require('vue');
Vue.use(require('v-calendar'));
Vue.component('a-calendar', require('./components/ArticleCalendar.vue').default);
const app = new Vue({
el: '#app'
});
<script src=" {{ mix('js/app.js') }}"></script>
<div id="app">
<a-calendar url="{{ url }}"></a-calendar>
</div>
ACalendar.vue
<template>
<div>
<v-calendar v-on:dayclick="dayclick"></v-calendar>
</div>
</template>
export default {
data(){
return {
items:[
],
isLoaded : false,
isLoading : false,
isError : false,
}
},
props: {
url : String
},
}
</script>
const mix = require('laravel-mix');
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.webpackConfig({
plugins: [
new VuetifyLoaderPlugin(),
],
});
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/chat.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.version();
app.scss
// Fonts
#import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
#import 'variables';
// Bootstrap
#import '~bootstrap/scss/bootstrap';
When I removed mix.webpackConfig and VuetifyLoaderPlugin,The calendar component works well.
After recently applied vuetify inside laravel 7 means with vuejs, I wasn't able to configure the vuetify actual settings, but that's what I have done and it works normal now.
Also I want to mention that vuetify has almost everything like calendars, tables buttons, forms etc...
resources/sass/app.scss
// Fonts
#import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
#import 'variables';
// Icons
#import '~#mdi/font/css/materialdesignicons.min.css';
#import '~material-design-icons-iconfont/dist/material-design-icons.css';
// Bootstrap
//#import '~bootstrap/scss/bootstrap';
// Vuetify
#import '~vuetify/dist/vuetify.min.css';
Note I have left the webpack.mix.js as it is
resources/js/app.js
require('./bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router'
import Vuetify from 'vuetify';
Vue.use(VueRouter);
Vue.use(Vuetify);
import {routes} from './routes';
import App from './components/App.vue';
const app = new Vue({
el: '#app',
vuetify: new Vuetify(),
router: new VueRouter({mode: 'hash', routes}),
render: h => h(App)
});
View where components are rendering means where app id is located
//Inside head tag
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
//Inside body tag
<v-app id="app"></v-app>
<script src="{{ asset('js/app.js') }}"></script>
This way I have configured my newly vuejs project with vuetify inside laravel 7, everythings is working fine, I might have misconfigured something means there might be a good approach than mine. But for me it's working now.
I have been trying to setup a simple vue application using VueRouter with Laravel. But the vue-router is not loading the components properly.
welcome.blade.php
<body>
<div id="app">
<main-app/>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
app.js
//import Vue from 'vue';
window.Vue = require('vue');
import VueRouter from 'vue-router';
import {
routes
} from './routes';
import MainApp from './components/MainApp.vue';
Vue.use(VueRouter);
const router = new VueRouter({
routes,
mode: 'history'
});
const app = new Vue({
el: '#app',
router,
components: {
MainApp
}
});
routes.js
import Home from './components/Home.vue'
export const routes = [{
path: '/',
component: Home,
name: 'Home'
}];
MainApp.vue
<template>
<div id="main">
<router-view></router-view>
</div>
</template>
If http://localhost:8080/vue-spa is dialed, "Home component" should be displayed (which we are displaying in Home.vue). But , nothing is displaying.
Screenshot of Dev Tools
I am new to Vue , help to find a solution for this.
Your routes.js should be -
import Home from './components/Home.vue'
export const routes = [{
path: '/vue-spa',
component: Home,
name: 'Home'
}];
Also, make sure the following is done -
You have executed the npm install command in your project. This will install the laravel-mix package, necessary for compiling your js files. (Learn more)
Then once you have your laravel-mix installed, configure the webpack.mix.js file present in your root folder. In your case (assuming the app.js file where you have written your js code is present in resources/js) the webpack.mix.js should look like -
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js');
This will yield the compiled resourses/js/app.js file in public/js/app.js
Once that is done execute npm run watch. This will recompile the public/js/app.js file every time you make any changes in your resources/js/app.js code or its imported files.
Another very important step would be to set up Laravel's routes so that any request the server receives gives an entry point to your vue.js SPA. This is the probable reason that you are getting a 404 page. Define the following route in your web.php to enable that -
<?php
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::view('/{any}', 'welcome')->where('any', '.*');
When reloading my single page application, I would like the url to load correctly instead of throwing a 404 error. Using Laravel 5.6, Vue.js 2.6, & MAMP.
I have tried the following code, however, I am loading different app.js files in the same welcome view based on what the URL is. Because of this structure,, this solution is not working:
Route::get('/{vue_capture?}', function () {
return view('welcome', ['app_path' => 'load different vuejs apps here in my routes/web.php file based on the url']);
})->where('vue_capture', '[\/\w\.-]*');
I would like to have refresh work with my vue router. Any suggestions, either having to do with my routes/web.php file or .htaccess file is appreciated.
Note: This .htaccess file configuration was not working for me (apache):
https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations
//welcome blade
<div id="app">
<app></app>
</div>
<script src="{{ asset($app_path) }}"></script>
//app.vue
<div class="container-fluid px-0">
<router-view/>
</div>
Well, as far I can see, your approach was good. You are capturing all GET requests, and passing them to your Blade view.
My suggestion:
Cleaner route:
Route::get('/{any}', 'YourController#index')->where('any', '.*');
Your app.js (main JS file should look something like this):
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import App from './views/App'
import About from './views/About'
import Home from './views/Home'
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About,
},
],
});
const app = new Vue({
el: '#app',
components: { App },
router,
});
With all this configuration and your router-view, you should be fine.