My app.js file is like below.
require('./bootstrap');
window.Vue = require('vue').default;
Vue.component('mosque-component', require('./components/MosqueComponent.vue').default);
Vue.component('prayer-component', require('./components/PrayerComponent.vue').default);
Vue.component('time-component', require('./components/TimeComponent.vue').default);
const app = new Vue({
el: '#content',
});
I added app.js file like below.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="{{ asset('js/app.js') }}" defer></script>
</head>
<body class="footer-offset">
</body>
</html>
I ran npm install, npm install vue and npm run dev. But I am getting below error. I can't see VueJS output also.
Instead of this-
window.Vue = require('vue').default;
Use like this-
window.Vue = require("vue");
As you are using el: '#content', make sure you have an element with id content in your blade file.
Related
I'm trying to use Vue for the first time in laravel but have been struggling to get it working and keep running into the same error.
resources/js/app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app'
})
resources/views/index.blade.php
#extends('header')
<title>{{ config('app.name') }}</title>
#section('content')
<div id='app'>
<example-component></example-component>
</div>
<script src="js/app.js"></script>
#endsection
resources/js/components/ExampleComponent.vue
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Example Component</div>
<div class="card-body">
<strong>I'm an example component.</strong>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name:'example-component',
mounted() {
console.log('Component mounted.')
}
}
</script>
Yes I have vue installed and have done npm install and npm run dev. for the record npm install refused to generate an app.js file inside public/js so I had to copy and paste one from a different project.
You are missing the point of using Vite or Laravel's assets in general...
I see you are expecting a js/app.js file and you literally have <script src="js/app.js"></script>. That is not have Laravel works. If you read this section of the documentation (prior to Vite), you had to use mix(...) to get the final URL of the asset, if you are using the new vesion (Vite), now you have to use #vite(...)...
So you should run npm run build (or dev) and then your code should be like this:
#extends('header')
<title>{{ config('app.name') }}</title>
#section('content')
<div id='app'>
<example-component></example-component>
</div>
#vite('resources/js/app.js')
#endsection
Forget about expecting to have app.js on the public folder or anything similar, never do that with any framework, always the read the documentation
We are trying to convert our app from jQuery to Vue in Laravel. One of the option we have is to do components by one since we are can't do everything from scratch.
One of the option is something like this.
require('./bootstrap');
import Vue from "vue"
import bla1 from "./vue/bla1"
import bla2 from "./vue/bla2"
const app = new Vue({
el: '#app',
components: {
bla1,
bla2
}
});
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
<div id="app">
<!-- Theres gonna have HTML HERE --->
<bla1 />
<bla2 />
<!-- Theres gonna have HTML HERE --->
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
As you can see, we are just adding seperate components. Is there a way those components can pass data to each other even not under the parent component?
Any input will be appreciated. Thanks
I am trying to use vue.js with laravel for the first time.
In the blade.php file:
<html>
<body class>
<div id="app">
<favourup></favourup>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
In the app.js file:
Vue.component('favourup', require('./components/Favourup.vue'));
const app = new Vue({
el: '#app',
});
In the vue file:
<template>
<div>
<h2>FavourUp</h2>
</div>
</template>
I am not getting any errors however the local host displays an empty web page when it should display 'FavourUp'
you should write .default at end of require vue components because of part of the vue-loader 15 updates, if your code uses the CommonJS syntax for importing EcmaScript modules, you'll need to append .default:
https://laravel-mix.com/docs/4.0/upgrade#importing-es-modules
but as #Ifaruki said you can import it too here's the code:
// first
Vue.component('favourup', require('./components/Favourup.vue').default);
// second
import Favourup from './components/Favourup.vue';
Vue.component('favourup', Favourup);
I built a Vue component that was packaged with "build-bundle": "vue-cli-service build --target lib --name my-component ./src/myComponent.vue". In the dist folder I have:
demo.html
my-component.common.js
my-component.udm.js
my-component.udm.min.js
Now, for the GitHub Page publication, I'am building a page explaining the details and the features of the component. I'll use a /docs folder as root for the GitHub Page (I don't want to use a gh-pages branch).
For this, I have to build a basic Vue App without Vue CLI, Webpack or so.
The index.html looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
...
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="js/my-component.umd.js"></script>
...
</head>
<body>
...
<div id="app">..</div>
...
<script type="module">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
components: {
myComponent: my-component
}
})
</script>
</body>
</html>
Info: I copied dist/my-component.umd.js to the docs/js folder in order to have a standalone folder.
The page works well if I do not use the component in the Vue script (Vue works properly). But, when I use the component, the page shows this error (index):199 Uncaught ReferenceError: vue is not defined which is pointing directly to myComponent: my-component.
Any idea or suggestion?
Try putting the scripts in the body section before your app code. Otherwise, Vue library could be loaded after running your app code
<!DOCTYPE html>
<html lang="en">
<head>
...
...
</head>
<body>
...
<div id="app">..</div>
...
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="js/my-component.umd.js"></script>
<script type="module">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
components: {
myComponent: my-component
}
})
</script>
</body>
</html>
I'm trying to use vuejs in my fresh laravel setup. I run the follwing commands in my command line
npm install
npm run dev
This commands runs without any errors. When I import the default VUE componet located under ~/ressources/assets/components/ExampleComponent.vue in my template nothing happends.
#section('content')
<example-component></example-component>
#endsection
Here the app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue'));
const app = new Vue({
el: '#app'
});
If you are using Laravel Mix check your webpack.mix.js file, default config must look like this
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
Now, look if you have linked JS file to you blade template
Looks like this for older Laravel versions (<= 5.5):
<script src="{{ asset('js/app.js') }}"></script>
and like this for new once (> 5.5)
<script src="{{ mix('js/app.js') }}"></script>
Finally, see you have
el: '#app'
it mean # - id, like in CSS, VueJS will search for element with id app.
Everything outside that element will not work.
so you have to use it like
<div id='app'>
<example-component></example-component>
</div>
or
<section id='app'>
<example-component></example-component>
</section>
I think you should wrap the container div with an id of app
<div id="app" > <example-component></example-component> </div>
if not just check if the Js files are properly imported in the php file
I also faced this problem and mine is solved. I'm not importing
<script src="{{ asset('js/app.js') }}" defer></script>
check that you are importing js/app.js and #app
It should work for you.
Lol, it was an faceplam question. I've removed the #yield('content') from the layout file. Sorry for that and tanks for help!
check if you are importing app.js
<script src="{{ asset('js/app.js') }}" defer></script>