I'm creating a new Laravel project (Laravel 7) and would like to use vue.js as frontend. I install it via laravel/ui.
The problem is Vue js doesn't seem to load and Vue Devtools showed vue.js not detected.
Here are the the blade file and app.js
blade file
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<link rel='shortcut icon' href='/images/favicon.ico'>
<link rel='stylesheet' href='/css/app.css'>
<title>Conference management</title>
</head>
<body>
<div id="app">
<section class="header">
<div class="level-left">
<div class="level-item">
<div>
<p class="title has-text-primary">Conference management</p>
</div>
</div>
</div>
<div class="level-right">
<a href="//www.cri.or.th" class="logo">
<img src="/images/cri_logo_s.png" alt="">
</a>
</div>
</section>
<section class="content">
<div class="container">
<div class="columns">
<div class="column"></div>
<div class="column is-half-table is-two-fifths-desktop">
include login
#{{ new Date }}
</div>
<div class="column"></div>
</div>
</div>
</section>
<footer class="footer">
<div class="content has-text-centered">
© #{{ year }} Organization
</div>
</footer>
</div>
<script type="text/javascript" src="/js/app.js">
</body>
</html>
app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.config.devtools = true;
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',
year: (new Date).getFullYear()
});
I ran npm run dev successfully and the css and js links are pointed to the correct file.
What could I be missing here?
Can you following this tutorial for your project : Link
Maybe you forget to install with npm vuejs.
Tell me if you have got again this problem :).
Related
I haven't used Laravel in ages and I'd like to import Vue into Laravel, because I know more about Vue. I've created a new Laravel Project, Installed Vue (Link 2) and still I'm seeing just a White screen. Code is posted below. I'm probably just missing a thing or two but can't seem to find out what it is.
To run the project I'm running php artisan serve.
welcome.blade.php code:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>IPMEDTH</title>
</head>
<body>
<div id="app">
<example-component></example-component>
</div>
<script src="{{ asset('/js/app.js') }}"></script>
<!-- <script src="{{ asset('js/app.js') }}"></script> also tried this -->
</body>
app.js code (while posting this I found out it doesn't reach this code, but why not?)
(see 'White screen'/Imgur link for folder structure)
alert("Hello World!"); // to test if js code is reached
require('./bootstrap');
window.Vue = require('vue').default;files(key).default))
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',
});
exampleComponent.vue code
<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">
I'm an example component.
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
require("./bootstrap");
window.Vue = require("vue").default;
Vue.component(
"example-component",
require("./components/ExampleComponent.vue").default
);
const app = new Vue({
el: "#app",
});
<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">
I'm an example component.
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap" rel="stylesheet">
</head>
<body class="antialiased">
<div id="app">
<example-component />
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
This is how I solved this problem
$ laravel new app-name
$ cd app-name
$ composer require laravel/ui
$ php artisan ui vue
$ npm install && npm run dev
<script src="{{ asset('/js/app.js') }}"></script>
<div id="app"> <component-name></component-name></div>
npm run watch
I have a fresh installation laravel app
I have run all the required commands
npm install and npm run dev and have included app.js file in my app.blade.php file
but still the vue js is not working
My app.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Demo Laravel Vue Chat</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/app.css') }}">
</head>
<body>
<div class="container">
<section>
<div id="app">
<ul class="list-group">
<li class="list-group-item active">Group Name</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
<input type="text" placeholder="Type Your Message" class="form-control" v-model="message" #keyup.enter="send">
</ul>
</div>
</section>
</div>
<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
</body>
</html>
My webpack file
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
My js/app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',
data: {
message: '',
},
methods:{
send()
{
console.log(this.message);
}
},
});
Stil the console is not giving output and the vue dev tool say vue js not detected
you forgot to add id app in body tag
<div id='app'></div>
You need to have id='app' in main wrapper. Your div wrappered by section tag and div with class container
Try this
<div id="app">
<example-componen></example-componen>
</div>
I am trying to remove any blade templates from my Laravel project, so this includes the homepage. I have left myself app.blade.php which contains the following
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<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>My Website</title>
<link href="/css/app.css" rel="stylesheet">
</head>
<body>
<div id="app">
<Navigation></Navigation>
<div class="container">
<main>
<router-view></router-view>
</main>
</div>
</div>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
So a Navigation Component and a router-view. I have installed the router package. Within web.php I have:
Route::get('/{any}', function(){
return view('layouts.app');
})->where('any', '.*');
Navigation.vue is simple:
<template>
<div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<router-link to="/" tag="a" class="nav-link" active-class="active" exact>
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>
Website Name
</p>
</router-link>
</div>
<ul class="nav navbar-nav">
<router-link to="/dashboard" tag="a" class="nav-link" active-class="active" exact>
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>
Dashboards
</p>
</router-link>
</ul>
</div>
</nav>
</div>
</template>
<script>
export default {}
</script>
I also have a couple of basic components: App.vue and Dashboard.vue that contain basic templates. And then in app.js I have:
require('./bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import Navigation from './components/Navigation';
let routes = [
{ path: '/', component: require('./components/App.vue').default },
{ path: '/dashboard', component: require('./components/Dashboard.vue').default }
];
const router = new VueRouter({
mode: 'history',
routes
});
const app = new Vue({
el: '#app',
components: { Navigation },
router
});
So when I visit my localhost:8000 I see a mostly empty page besides the navigation, as to be expected. However, when I click on the link, the content of a sample component is not being displayed, even though the url is changing. For example, Dashboard component is:
<template>
<div>
<main>
<h1>This is a dashboard</h1>
</main>
</div>
</template>
<script>
export default {}
</script>
Is there any reason within my setup why it is not displaying the content by clicking the navigation?
Using require(...).default is required by vue-loader#15 which included in laravel-mix#4. If you're using previous versions of laravel-mix (as it seems) you should not add .default:
let routes = [
{ path: '/', component: require('./components/App.vue') },
{ path: '/dashboard', component: require('./components/Dashboard.vue') }
];
I am using vuejs as a drop in for some minor functionality in a Laravel app (i.e. not components) and for some reason that I'm yet to discover v-model is not working.
Here's my base layout blade file that was generated via php artisan make:auth, contents mostly removed as irrelevant:
resources/views/layouts/app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<!-- css imports etc. -->
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light navbar-laravel">
<!-- nav menu -->
</nav>
<main class="py-4">
#yield('content')
</main>
</div>
#stack('scripts') <---- Javascript goes here!
</body>
</html>
Here's the file where v-model is being used and not working, again, irrelevant parts have been removed:
resources/views/instructors/create.blade.php
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-body">
<div class="card-title">
<h2>vue: #{{ message }}</h2> <-- This works
<div>
<input type="text" v-model="message"> <-- Blank!!?
</div>
</div>
<!-- more html -->
</div>
</div>
</div>
</div>
</div>
#endsection
#push('scripts')
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
#endpush
The input field which v-model="message" is bound to is completely empty, however, when outputting message via curly braces I can see it's value. This is what it looks like:
Any ideas what's going wrong? I have checked the console and Vue dev tools and no errors show up, in fact nothing shows up at all in Vue dev tools - an issue perhaps? I copy pasted these code snippets from the Vue docs introduction to make sure I wasn't doing something silly. I have tried setting the data attribute inside the Vue instance as a function returning an object but it makes no difference. I also have the code working here: https://jsfiddle.net/eywraw8t/249625/ where the input field shows the value of message as I am expecting it to work.
I wouldn't consider myself a Vue pro but I'm no beginner and I cannot quite figure out what's going on. Any help would be appreciated, thanks!
Update
Thanks to everyone who answered. Made a silly mistake... I forgot that there is some JS that is pulled in, in the <head> when running make:auth - this includes Vue by default. I forgot to look properly here as assumed it would be prior to </body>. I believe the two JS scrips were conflicting which was causing the issue. See head below:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script> <-- Vue included here
<!-- Fonts -->
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
I commented the script out and it's working fine now.
For vue.js 2 use the following:
<html>
<body>
<div id="app">
<h1>Vue: #{{message}}</h1>
<input v-model="message">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
</body>
</html>
For more details how to work on v-model: Laracasts_episodes_2
try the following code
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-body">
<div class="card-title">
<div id="app">
<template>
<div>
<div class="card-title">
<h2>
Add Instructor
</h2>
<h2>vue: #{{ message }}</h2>
<div>
<input type="text" v-model="message">
</div>
</div>
</div>
</template>
</div>
</div>
<!-- more html -->
</div>
</div>
</div>
</div>
</div>
#endsection
#push('script')
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
});
</script>
#endpush