I seem to be unable to call a method from a JS package from one of my other files (all.js). I am using Laravel 5.4, VueJS2, and VueRouter. This is an SPA where Laravel serves as a backend.
I get the following error: TypeError: $.LoadingOverlay is not a function
I am utilizing web pack and compiling the assets like this:
mix.js([
'resources/assets/js/bootstrap.js',
'resources/assets/js/helpers.js',
'././node_modules/gasparesganga-jquery-loading-overlay/src/loadingoverlay.min.js',
'resources/assets/js/app.js',
'././node_modules/moment/min/moment.min.js',
'././node_modules/moment-duration-format/lib/moment-duration-format.js',
], 'public/js/all.js').version();
The file containing the code I am trying to pull in is the loadingoverlay.min.js file. The file that is referencing it is right underneath it (app.js).
My app.js file:
import Vue from 'vue';
import VueRouter from 'vue-router';
var $ = require('jquery');
Vue.use(VueRouter);
const routes = [
.. routes here
];
const router = new VueRouter({
routes,
mode: 'history',
});
router.beforeEach((to, from, next) => {
console.log('Entering route');
$.LoadingOverlay('show');
next();
});
router.afterEach((to, from) => {
console.log('Entered route');
$.LoadingOverlay('hide');
})
const app = new Vue({
router
}).$mount('#app');
The blade file that is responsible for pulling in the compiled assets:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="{{ mix('css/all.css') }}">
<meta name="csrf-token" content="{{ csrf_token() }}"/>
</head>
<body>
<div id="app">
<section class="container">
<div>
<router-view></router-view>
</div>
</section>
</div>
<script src="{{ mix('js/all.js') }}"></script>
</body>
</html>
Interestingly enough, I am able to call the method from that file from my blade page by adding <script></script> tags after the all.js file is pulled in, and calling it from there.
Any ideas on why this may be happening?
Exactly as it says, because $.LoadingOverlay is not a function.
The jQuery compiled into your all.js via webpack (done via nodejs) will cause the $ = require('jQuery') to be different than the one globally exposed via window.$
window.$ is referencing jQuery 1.11.0 and the one inside your app.js is referencing the jQuery built with webpack.
Related
I am Learner in Vuejs with laravel, i created a fresh project in laravel, with vue.js frontend. but after run command php artisan serve, when i run project on webbrowser. output is blank. i checked network console, there is also the output showing in example component is blank. please help me to find my mistake.
web.php
Route::get('/', function () {
return view('welcome');
});
welcome.blade.php
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel Vue</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
</head>
<body>
<div id="app">
<example-component> </example-component>
<script src="{{ asset('js/app.js') }}"></script>
</div>
</body>
</html>
ExampleComponent.vue
<script>
Vue.component('example-component', {
template: `This is the homepage`
})
new Vue({
el: '#app'
})
</script>
app.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
require('./bootstrap');
window.Vue = require('vue');
alert('Alert');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('example-component', {
template: `<div id="app">This is the homepage</div>`
})
You have to wrap the template content in a parent element, such as <div> </div>. If not Vue will show an error, explaining that every component must have a single root element.
I created a sample Vue application via #vue/cli 3.0:
vue create testapp
cd testapp
npm run serve
As part of mounted(), I wanted to fetch some local data:
fetch("users.json")
.then(r => r.json())
.then(r => this.users = r.hits.hits.map(x => x._source))
where users is defined in data().
The response is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="/favicon.ico">
<title>example.com</title>
<link href="/about.js" rel="prefetch"><link href="/app.js" rel="preload" as="script"></head>
<body>
<noscript>
<strong>We're sorry but example.com doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="/app.js"></script></body>
</html>
I tried to move the JSON file to static in the root of the application (at the same level as src, then in assets and then everywhere I could think of - the answer is always the one from the app which assumes that this is a request for HTML/JS/CSS content, and not raw data.
Where should such a static file be placed?
You may assign the JSON into your data at the beginning, try this in your App.vue
<template>
<div>
<div v-for="user in users">{{user}}</div>
</div>
</template>
<script>
import json from './users.json'
export default{
data(){
return{
users: json
}
}
}
</script>
And also make sure your main.js has import App.vue
import Vue from 'vue'
import App from './App'
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
Locate your users.json at the same level as src(which is same with App.vue) is fine.
Hope this may help you! Cheers
I use Vue.js CDN and I put all the Vuejs code inside a script tag in index.html.
It works fine. However, I'd like to use this component to add tags functionality.
But I receive this error :
This is how my code looks like:
<script>
import VTagInput from 'v-tag-input'
Vue.use(VTagInput)
var app = new Vue({
el: '#app',
delimiters: ["[[", "]]"],
components: {VTagInput},
tags: []
data: {
errors: [],
I npm installed the package as specified in the github repo.
This is the head tag:
<head>
<meta charset="utf-8">
<meta name="author" content="Seif Elmughrabi">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="(( url_for('static', filename='materialize.css') ))" media="screen, projection">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons">
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"> -->
<!--Google Icons-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="(( url_for('static', filename='style.css') ))">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Your Insurance Policy Planner</title>
</head>
You cant import another files in browser using 'import' you need to use webpack, however you can use this cdn to load the plugin in your html after loading vue.js file, https://unpkg.com/v-tag-input#0.0.3/dist/v-tag-input.js , here is a working example
new Vue({
el:"#app",
data: {
tags: ['foo', 'bar']
}
})
<script src="https://unpkg.com/vue#2.5.13/dist/vue.min.js"></script>
<script src="https://unpkg.com/v-tag-input#0.0.3/dist/v-tag-input.js"></script>
<div id="app">
<v-tag-input v-model="tags"></v-tag-input> {{tags}}
</div>
You should load the script where VTagInput is located in your head, right after Vue. Then no need to import anything, VTagInput will be accessible globally
i am following this tutorial https://v2.vuejs.org/v2/guide/#Declarative-Rendering. the page works fine without error on console but i cant change the message via console to showing "app2.message" and give me error "#app2 is not defined". its not working like they said
We have already created our very first Vue app! This looks pretty similar to rendering a string template, but Vue has done a lot of work under the hood. The data and the DOM are now linked, and everything is now reactive. How do we know? Open your browser’s JavaScript console (right now, on this page) and set app.message to a different value. You should see the rendered example above update accordingly.
here is my script:
window.addEventListener('load',
function() {
var app2 = new Vue({
el: '#app-2',
data: {
message: 'You loaded this page on ' + new Date().toLocaleString()
}
})
}, false);
this is how i include the js
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>3R Inventory | #yield('title')</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="{{ URL::to('css/app.css') }}">
<script type="text/javascript" src="{{ URL::to('js/app.js') }}"></script>
<script type="text/javascript" src="{{ URL::to('/js/tigaer.js') }}"></script>
</head>
I was following with along the Ember Guides: Defining Your Routes and added a customized index route in my Ember app; which sets a controller title property:
// app/routes/index.js
import Ember from 'ember';
export default Ember.Route.extend({
setupController: function(controller) {
// Set the IndexController's `title`
controller.set('title', 'Tagged! - home');
}
});
I then added an output for the title in app/index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{title}}</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
{{content-for 'head'}}
<link rel="stylesheet" href="assets/vendor.css">
<link rel="stylesheet" href="assets/tagged-ember.css">
{{content-for 'head-footer'}}
</head>
<body>
{{content-for 'body'}}
<script src="assets/vendor.js"></script>
<script src="assets/tagged-ember.js"></script>
{{content-for 'body-footer'}}
</body>
</html>
However instead of the expected output I get {{title}} in the browser title bar. Why is HTMLbars not outputting the variable?
I'm using the ember-cli (ember 1.13.3) and running the server with ember server. I can see the controller property in the ember inspector.
The index.html file is outside the scope of the application controller/route/template, ember-cli-document-title solves the issue for you.
If you don't want to use it you can create an in-repo-addon that makes use of something like {{content-for 'document-title'}}.