Laravel 5 VueJS not working - javascript

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>

Related

Vue component error in Laravel "Unknown custom element"

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

Vue is undefined

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.

Vue.js in Laravel

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);

laravel 5.5 and vue js not working out of box

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.

Angular 2 and Laravel 5.2 - Display Different Blade Templates

I've just managed to get Laravel and AngularJS 2 setup together.. albeit a very simple setup ie I have a main welcome.blade.php file that shows as the index page, however, I would like to make some kind of navigation where you can switch between pages and angular will pull the info in from various blade templates and this is where I am stuck, I understand how to generate the nav in angular etc but I am not sure what to add to the #component({template:xxxxxxxxxx}) field in order for it to pull in blade templates.. does anyone have any examples of how to render these external templates in the angular components ? below is what i have so far and it injects My First Angular 2 App into the default laravel welcome page.
app.components.ts
///<reference path="../../../public/js/angular2/core.d.ts"/>
import {Component} from 'angular2/core';
#Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }
boot.ts
///<reference path="../../../public/js/angular2/typings/browser.d.ts"/>
/* the above file fixes an issue with promises etc - was getting loads of errors then found this http://stackoverflow.com/questions/35382157/typescript-build-getting-errors-from-node-modules-folder*/
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);
welcome.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel</title>
<script src="{{ url('/') }}/js/es6-shim/es6-shim.min.js"></script>
<script src="{{ url('/') }}/js/systemjs/dist/system-polyfills.js"></script>
<script src="{{ url('/') }}/js/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="{{ url('/') }}/js/angular2/bundles/angular2-polyfills.js"></script>
<script src="{{ url('/') }}/js/systemjs/dist/system.src.js"></script>
<script src="{{ url('/') }}/js/rxjs/bundles/Rx.js"></script>
<script src="{{ url('/') }}/js/angular2/bundles/angular2.dev.js"></script>
<script type="text/javascript">
System.config({
"baseURL": '/js',
"defaultJSExtensions": true,
"packages": {
typescript: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('typescript/boot').then(null, console.error.bind(console));
</script>
</head>
<body>
<div class="container">
<div class="content">
<div class="title">Laravel 5</div>
<my-app>Loading...</my-app>
</div>
</div>
</body>
</html>
Maybe I am very mistaken, but from what I understand Angular cannot render blade templates? They are first rendered by Laravel before being sent as regular HTML with whatever was filled in on the template. Then Angular is initialized and works with the HTML document. I typically like to let Angular handle all my routing and make it a SPA by just redirecting any undefined routes in routes.php to a single index page where Angular's router will render different views. Sadly, I have not made the transition yet to Angular 2 so I'm not sure how the router is setup. But this is just a route file I use that has a "catch-all" so to speak that redirects to the index page.
Route::group(["prefix" => "api"], function() {
Route::resource("users", "UsersController");
Route::group(["prefix" => "users"], function() {
Route::get("{id}/places", "UsersController#getPlaces");
Route::get("{id}/searches", "UsersController#getSearches");
});
Route::resource("places", "PlacesController");
Route::resource("searches", "SearchesController");
Route::group(["prefix" => "auth"], function() {
Route::get("/", "AuthController#GetAuth");
Route::get("logout", 'Auth\AuthController#logout');
});
});
Route::get('/', 'RedirectController#toAngular');
// Authentication Routes...
Route::get('login', 'RedirectController#toAngular'); // Override, let Angular handle login form
Route::post('login', 'Auth\AuthController#login');
Route::get('logout', 'Auth\AuthController#logout');
// Registration Routes...
Route::get('register', 'RedirectController#toAngular');
Route::post('register', 'Auth\AuthController#register');
// Password Reset Routes...
Route::get('password/reset/{token?}', 'Auth\PasswordController#showResetForm');
Route::post('password/email', 'Auth\PasswordController#sendResetLinkEmail');
Route::post('password/reset', 'Auth\PasswordController#reset');

Categories

Resources