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>
Related
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
in my Laravel 8 / apline 2.8 / tailwindcss 2 app
I want to make alpine component which must be accessible on all pages of the site and I
want to use footer for this
My resources/views/layouts/app.blade.php has structure :
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
...
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
...
</head>
<body class="flex flex-col min-h-screen">
<header class="h-14 bg-red">
#include('layouts.header')
</header>
<main class="flex-1">
#yield('content')
#yield('scripts')
</main>
<footer class="h-8 bg-green">
#include('layouts.footer')
</footer>
</body>
</html>
But Trying to implement footer comnponent in resources/views/layouts/footer.blade.php :
<div class="m-0 p-0">
<div class="flex w-full p-0 m-0 content-center justify-between md:w-1/2 md:justify-end" x-data="adminFooterComponent()">
...
</div>
</div>
#section('scripts')
<script>
function adminFooterComponent() {
console.log('adminFooterComponent::')
return {
addDonationOpen: false,
}
} // function adminFooterComponent() {
</script>
#endsection
I got error :
Uncaught ReferenceError: adminFooterComponent is not defined
I suppose that I got this error as I did not wrap(as I do on all my pages) my footer in
#section('content')
...
#endsection
section. But I really do not need it, as resources/views/layouts/footer.blade.php is a partial file.
How can I implement alpine component accessible on all pages of the app?
Thanks!
I think the issue arises since the section is included in the footer. To resolve the issue, we can include the section in the actual view or we can just include it in the layout file itself.
Method 1 - In the blade file
#extends('layouts.app')
#section('content')
......
#endsection
#section('scripts')
<script>
function adminFooterComponent() {
console.log('adminFooterComponent::')
return {
addDonationOpen: false,
}
}
</script>
#endsection
Method 2 - In layout file (directly) app.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.8.0/dist/alpine.min.js" defer></script>
</head>
<body class="flex flex-col min-h-screen">
<main class="flex-1">
#yield('content')
</main>
<footer class="h-8 bg-green">
#include('layouts.footer')
</footer>
<script>
function adminFooterComponent() {
console.log('adminFooterComponent::')
return {
addDonationOpen: false,
}
}
</script>
</body>
The straightforward solution is Method 2 so that the code is not replicated.
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 :).
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