I have compiled the assets and ran
npm install followed by npm run watch
using the example Vue file that comes build in I changed welcome.blade to
<body>
<div id="app">
<Example></Example>
</div>
<script href="{{URL::asset('js/app.js')}}" charset="utf-8"></script>
</body>
</html>
and also install Vue dev tools and nothing is viewing at all
Example.vue
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Example Component</div>
<div class="panel-body">
I'm an example component!
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
app.js
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: '#app'
});
What I get on page load
You just need to add
<script src="{{ mix('js/app.js') }}"></script> before de </body> tag.
In this way to are adding the mix that contains the Vue library, components, and so much more.
I Hope this helps.
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
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'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>
I have a problem because template from Vue.js is not showing in blade.php. I did all step by step from this tutorial https://www.itechempires.com/2017/10/laravel-5-5-vuejs-2-0-crud-operations-application/ and it's not working.
My code:
Roster.vue
<template>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">Roster</div>
<div class="panel-body">
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
}
}
</script>
app.js
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('example-component', require('./components/ExampleComponent.vue'));
Vue.component('roster', require('./components/Roster.vue'));
const app = new Vue({
el: '#app'
});
Roster blade:
#extends('layouts.admin.dashboard')
#section('content')
<task></task>
#endsection
I ran gulp watch and still nothing.
------------edit:
Solution for problem was missing <div id="app"> </div>
Solution for problem was missing
<div id="app"> </div>
and
<script src="{{ mix('js/app.js') }}"></script>
in blade file.
I'm building a website with Vuejs. I have the code like this
app.js
new Vue({
el: '.page-wrapper',
...
})
index.html
<body>
<div class="page-wrapper">
<!-- content-->
</div>
</body>
Now I want to embed a widget which is built by Vuejs like
<div id="widget"></div>
<script src="https://widget.com/widget.js"></script>
inside page-wrapper class.
I've tried to put the script tag outside the origin Vue component but the content of widget still did not render.
I'm new to Vuejs, could anyone help me out?
I'm just going to take a stab at this...
index.html
<div id="app">
<my-widget></my-widget>
</div>
<script src="https://cdn.jsdelivr.net/vue/2.2.6/vue.min.js"></script>
<script src="https://widget.com/widget.js></script>
<script src="main.js"></script>
main.js
Vue.component('my-widget', {
template: '<div id="widget"></div>'
});
new Vue({
el: '#app'
});
My Vue instance is #app and I'm loading your widget.js asset in index.html. I'm probably completely underestimating this, apologies if that's the case!