I have a problem with my single page application(SPA) using Vue 3, Vue Router 4 & Laravel 8, my problem is that the components is not loading.
I made sure I installed vue-router, I don't know why the code can't run. The links are not even clickable. I have been on this for over 3 days now and still I haven't found the solution to the problem
This is my code.
app.js
require('./bootstrap');
window.Vue = require('vue').default;
import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from './routes';
Vue.use(VueRouter);
Vue.component('home', require('./components/Home.vue').default);
Vue.component('about', require('./components/About.vue').default);
Vue.component('contact', require('./components/Contact.vue').default);
const app = new Vue({
el: '#app',
router: new VueRouter(routes)
});
routes.js
import Home from './components/Home.vue';
import About from './components/About.vue';
import Contact from './components/Contact.vue';
export default{
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
},
{
path: '/contact',
name: 'contact',
component: Contact
}
]
}
contact.vue
<template>
<h1>This is the contact us page.</h1>
</template>
<script>
export default {
}
</script>
about.vue
<template>
<h1 class="big">This is the about us page.</h1>
</template>
<script>
export default {
}
</script>
home.vue
<template>
<h1 class="big">This is the home page.</h1>
</template>
<script>
export default {
}
</script>
app.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<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>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div id="app">
#yield('content')
</div>
</html>
welcome.blade.php
#extends('layouts.app')
#section('content')
<router-link class="text-center" to='/'>Home</router-link>
<router-link class="" to='/about'>About</router-link>
<router-link class="" to='/contact'>Contact</router-link>
<router-view></router-view>
#endsection
web.php
<?php
use Illuminate\Support\Facades\Route;
Route::get('/{any}', function(){
return view('welcome');
})->where('any', '.*');
The links are not clickable
I have removed the extra div that make You confused.
#extends('layouts.app')
#section('content')
<div id="app">
<router-link class="text-center" to='/'>Home</router-link>
<router-link class="" to='/about'>About</router-link>
<router-link class="" to='/contact'>Contact</router-link>
<router-view></router-view>
</div>
#endsection
Related
I am new to Vue JS and I installed vue 3 with laravel and it shows 404 Not Found. I tried a lot but could not find out the issue.
app.blade.php
<div class="min-h-screen bg-gray-100" id="app">
<!-- Page Content -->
<main>
{{ $slot }}
</main>
</div>
app.js
import { createApp } from "vue";
import router from './router'
import CompaniesIndex from './components/companies/CompaniesIndex'
createApp({
components: {
CompaniesIndex
}
}).use(router).mount('#app')
index.js
import { createRouter, createWebHistory } from "vue-router";
import CompaniesIndex from '../components/companies/CompaniesIndex'
const routes = [
{
path: '/welcome',
name: 'companies.index',
component: CompaniesIndex
},
]
export default createRouter({
history: createWebHistory(),
routes
})
ComponiesIndex.vue
<template>
Hello world
</template>
<script>
export default {
}
</script>
web.php
Route::get('/{any}', function () { return view('app'); })->where('any', '. *');
welcome.blade.php
<body class="antialiased">
<h1>Welcome to Laravel Vue 3</h1>
</body>
I'm not sure, but there is maybe an error in your routes/web.php in where statement, because . * regex should match any string and this is .* without whitespace. Please try:
Route::view('/{any}', 'app')->where('any', '.*');
If you are creating SPA your app.blade.php should not contain any markup, it should be blank HTML template with required script with your app:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<script src="{{ mix('assets/js/app.js') }}" defer></script>
<link href="{{ mix('assets/css/app.css') }}" rel="stylesheet">
</head>
<body>
<noscript>
<strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
</body>
</html>
Then you just mount your Vue app to #app div, which seems to be good in your app.js.
I'm trying to setup Vue in Laravel 6.
I've ran:
composer require laravel/ui
php artisan ui vue
npm install && npm run dev
Then inside of welcome.blade.php, i've deleted the body of the welcome page and added a div with the id of root.
I can get the example component to show in the browser but I can't create any new components and get them to show without getting the error. I've even tried just renaming the example-component and even that won't work. I renamed the file to App.vue, and then renamed everthing else - see below:
app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('app', require('./components/App.vue').default);
const app = new Vue({
el: '#app',
});
welcome.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="csrf-token" content="{{csrf_token()}}">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css/app.css">
<!-- Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>Journey To Dev</title>
</head>
<body>
<div id="app">
<app></app>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
The App.vue is unchanged from ExampleComponent.vue, i just renamed the file:
<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>
Thanks!
You need to run
npm run dev
Again everytime you change Javascript assets or Vue components so that Webpack recompile them to public/js/app.js
Or even better, boot up a watcher and let it recompile when you change code
npm run watch
And make sure to hard refresh or leave the devtools console open so cache would be disabled
You can also automatically register components like so
const files = require.context('./', true, /\.vue$/i)
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
instead of
Vue.component('app', require('./components/App.vue').default);
Hope this helps
I'm trying to setup Inertia to use in my Laravel project but it gives me errors? Where is my mistake?
I installed Inertia with this command
composer require inertiajs/inertia-laravel
followed the instructions on the github page and added #inertia to my app.blade.php like this:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<link rel="icon" type="image/jpg" href="{{asset("/image/logo2.png")}}">
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
#inertia
</body>
</html>
in my Login Controller
public function showLoginForm()
{
return Inertia::render('Auth/Login');
}
in my routes/web.php
Auth::routes();
Route::get('login', 'Auth\LoginController#showLoginForm')->name('login');
Route::post('login', 'Auth\LoginController#login');
This is the error I get:
the lines that is highlighted is the #inertia which show up as this
<div id="app" data-page="<?php echo e(json_encode($page)); ?>"></div>
What am i doing wrong?
#inertia blade directive is working but not rendered because you need to install the frontend adapter
npm install #inertiajs/inertia #inertiajs/inertia-vue
Set it up in webpack.mix.js
const mix = require('laravel-mix')
const path = require('path')
mix.js('resources/js/app.js', 'public/js')
.webpackConfig({
output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
resolve: {
alias: {
vue$: 'vue/dist/vue.runtime.esm.js',
'#': path.resolve('resources/js'),
},
},
})
And initialize it in Vue resources/js/app.js
import { InertiaApp } from '#inertiajs/inertia-vue'
import Vue from 'vue'
Vue.use(InertiaApp)
const app = document.getElementById('app')
const pages = {
'Auth/Login': require('./Pages/Auth/Login.vue').default,
}
new Vue({
render: h => h(InertiaApp, {
props: {
initialPage: JSON.parse(app.dataset.page),
resolveComponent: name => pages[name],
},
}),
}).$mount(app)
I want to use Laravel Passport in my project, I have followed this tutorial of Laravel Passport https://laravel.com/docs/5.3/passport.
After following this tutorial, I am getting Uncaught ReferenceError: require is not defined error.
Please have a look into my files :
gulpfile.js
var elixir = require('laravel-elixir');
require('laravel-elixir-webpack');
elixir(function(mix) {
mix.scripts('app.js');
mix.styles([
'bootstrap.min.css',
'font-awesome.min.css',
'gentelella.min.css'
],'public/css/app.css');
});
resource/assets/js/app.js
Vue.component(
'passport-clients',
require('./components/passport/Clients.vue')
);
Vue.component(
'passport-authorized-clients',
require('./components/passport/AuthorizedClients.vue')
);
Vue.component(
'passport-personal-access-tokens',
require('./components/passport/PersonalAccessTokens.vue')
);
const app = new Vue({
el: '#manage-passport'
});
home.blade.php
#extends('layouts.blank')
#section('content')
<div class="container" id="manage-passport">
<!-- let people make clients -->
<passport-clients></passport-clients>
<!-- list of clients people have authorized to access our account -->
<passport-authorized-clients></passport-authorized-clients>
<!-- make it simple to generate a token right in the UI to play with -->
<passport-personal-access-tokens></passport-personal-access-tokens>
</div>
#stop
blank.blade.php
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Passport! | </title>
<meta name="token" id="token" value="{{ csrf_token() }}">
<!-- Styles -->
<link href="/css/app.css" rel="stylesheet">
</head>
<body class="nav-md">
<div class="container body">
<div class="main_container">
#yield('content')
</div>
</div>
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="js/gentelella.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.min.js"></script>
<script type="text/javascript" src="/js/app.js"></script>
#stack('scripts')
</body>
Maybe the problem in the absence of token?
blank.blade.php
<script>
window.Laravel = {!! json_encode(['csrfToken' => csrf_token()]) !!}
</script>
also, check whether the transmitted parameters such as token
Vue.http.interceptors.push((request, next) => {
request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);
next();
});
I have a fresh install of Laravel passport inside of an existing Laravel 5.3 project of mine.
EDIT: I have now realised that any Vue components (even the default example component) show as fragments if i try and import them.
I am trying to import the Vue components into my application however when I do so, Vue debug tool in chrome is telling me that the elements are fragments.
Looking at the source of the page, it doesn't mention them, so im guessing that the components are being registered into the page correctly
I have been looking around and have found that most places referencing this error in vue are caused by the vue components not being wrapped in a div that roots to an element in the page however the same components have worked in a fresh install.
What should i be looking for to find the problem with this?
Here is my master layout
<!DOCTYPE html>
<html lang="en">
<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() }}">
#include('includes.title')
<!--Baked in styles -->
#include('includes.styles')
<!-- Theme Custom styles -->
<link href="{{ asset('/css/custom.css') }}" rel="stylesheet">
{{--Fonts and icons--}}
<!-- Scripts -->
<script>
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>
</script>
#yield('css')
</head>
<body>
#include('includes.navbar')
#yield('content')
<!-- Scripts -->
{{--Core ecomplete JS--}}
<script type="text/javascript" src="{{ asset('js/all.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/jquery.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/jquery-ui.custom.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/bootstrap.js') }}"></script>
{{--End core ecomplete JS--}}
<script type="text/javascript" src="{{ asset('js/sweetalert.min.js') }}"></script>
#yield('js')
<!-- Plugins -->
<script src="{{ asset('js/gsdk-checkbox.js') }}"></script>
<script src="{{ asset('js/bootstrap-select.js') }}"></script>
<!-- End Plugins -->
<!-- GSDK JS -->
<script src="{{ asset('js/get-shit-done.js') }}"></script>
#include('sweet::alert')
</body>
</html>
Here is the code for my app.js
Vue.component('example', require('./components/Example.vue'));
Vue.component(
'passport-clients',
require('./components/passport/Clients.vue')
);
Vue.component(
'passport-authorized-clients',
require('./components/passport/AuthorizedClients.vue')
);
Vue.component(
'passport-personal-access-tokens',
require('./components/passport/PersonalAccessTokens.vue')
);
const app = new Vue({
el: 'body'
});
Here is the code for my api.blade.php
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row">
<div class="col-md-8">
<passport-clients></passport-clients>
<passport-authorized-clients></passport-authorized-clients>
<passport-personal-access-tokens></passport-personal-access-tokens>
</div>
</div>
</div>
#endsection
I call it from a simple route closure.
Web.php
Route::get('api', function(){
return view('api');
});