I'm following this simple Crud tutorial for Vue + Laravel and everything in Laravel part seems fine (from creating controllers & models) seems fine but I can't make vue show up in Laravel welcome blade. Here's my code:
app.js file
require('./bootstrap');
window.Vue = require('vue');
import App from './App.vue';
import VueAxios from 'vue-axios';
import VueRouter from 'vue-router';
import axios from 'axios';
import { routes } from './routes';
Vue.use(VueRouter);
Vue.use(VueAxios, axios);
const router = new VueRouter({
mode: 'history',
routes: routes
});
const app = new Vue({
el: '#app',
router: router,
render: h => h(App),
});
App.vue file:
<template>
<div class="container">
<h2>Vue app</h2>
<router-view> </router-view>
</div>
</template>
<script>
export default {}
</script>
and this is the welcome.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">
<title>Laravel</title>
<style>
body {
font-family: 'Nunito', sans-serif;
}
</style>
</head>
<body class="antialiased">
<div id="app"> </div>
<script src="{{ mix('js/app.js') }}" type="text/javascript"></script>
<h2>The welcome blade</h2>
</body>
</html>
edit: answer added below, basically followed another tutorial
Looking at the code after composer require laravel/ui and php artisan ui vue I see small change that may affect the execution of code.
Originally the Laravel setup creates window.Vue = require('vue').default;, but your code has window.Vue = require('vue')
Firstly, try this:
<script src="{{ asset('js/app.js') }}" defer></script>
Secondly, you may need a router view element inside the div with id app. I can't say for sure since I don't know your routes. If the change above doesn't solve the problem, add router view like
<div id="app">
<router-view />
</div>
UPDATE
Another thing to try. Remove these lines
import VueAxios from 'vue-axios';
import axios from 'axios';
Vue.use(VueAxios, axios);
because you have axios on bootstrap.js file.
And make sure there is no error message on the console.
So it must have been something wrong with my installation process because I followed another tutorial and now it's working video
Related
Im new in Vue.js, so i watched a tones of tutorials and forums for how to render Vue.js component inside Laravel blade and i didnt find any solutions for that.
In my current app.js i render router-view inside App.vue
But when i want try to put router-view inside welcome.blade.php nothing shows...
import './bootstrap';
import {createApp} from 'vue';
import App from './App.vue';
import axios from 'axios';
import router from './router';
const app = createApp(App);
app.config.globalProperties.$axios = axios;
app.use(router);
app.mount('#app');
and this is my App.vue
<template>
<div class="container">
<NavMenu/>
<router-view></router-view>
</div>
</template>
So what i want is
<!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() }}" />
<title>{{ env('APP_NAME') }}</title>
</head>
<body>
<div id="app">
<router-link :to="{ name: 'home' }">
<router-link :to="{ name: 'about' }">
<router-view></router-view>
</div>
#vite('/resources/js/app.js')
</body>
</html>
Already read all posts here on stackoverflow and didnt helps, also Vue or Laravel documentation doesnt have nice explanation.
I would be very grateful if you could help me in further research and my studies.
So VueJS 3 as framework and VueJs 3 used in Laravel Webpack mix are two things differents :
Router is available in VueJS framework
VusJS in Laravel webpack offers you the ability to add custom components like :
in app.js :
const app = createApp({})
app.component('example-component', require('./components/ExampleComponent.vue').default);
and use it in blade <example-component></example-component>
You can create a VueJS fronted Web App and a Laravel project for your backend API so you can benefit from the power of each tool.
I'm running into a problem where my Vue component isn't showing via router-view, there are no Vue warnings or errors in the console.
Here's the git: https://github.com/woottonn/fullstack
Here's my code:
web.php
<?php
Route::any('{any}', function(){
return view('welcome');
})->where('any', '.*');
welcome.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">
<title>Full Stack Blog</title>
</head>
<body class="antialiased">
<div id="app">
<mainapp></mainapp>
</div>
<script src="{{mix('/js/app.js')}}"></script>
</body>
</html>
app.js
require('./bootstrap');
import Vue from 'vue'
import router from './router'
Vue.component('mainapp', require('./components/mainapp.vue').default)
const app = new Vue({
el: '#app',
router
});
router.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import myFirstVuePage from './components/pages/myFirstVuePage'
const routes = [
{
path: '/my-new-vue-route',
component: myFirstVuePage
}
];
export default new Router({
mode: 'history',
routes
})
mainapp.vue
<template>
<div>
<h1>VUE Componenty</h1>
<router-view></router-view>
</div>
</template>
myFirstVuePage.vue
<template>
<div>
<h1>This is my first page...</h1>
</div>
</template>
Am I missing obvious something here?
--- EDIT: Going directly to the URL (/my-new-vue-route) throws an error, so that's not working either. ---
In routes/web.php, add this:
Route::get('/{vue_capture?}', function () {
return view('welcome');
})->where('vue_capture', '[\/\w\.-]*');
This helps the Laravel to capture URLs generated by Vue and is a solution for routing when history mode is set, as you seem to have.
export default new Router({
mode: 'history',
routes
})
I registered App.vue as the main component in Vue.js but when I use it in Laravel blade I get this console error
[Vue warn]: Unknown custom element: <app> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
this is my code in app.js
require('./bootstrap');
import Vue from 'vue';
import VueRouter from 'vue-router';
import Vuex from 'vuex';
import routes from './routes'
import App from './App'
Vue.use(VueRouter);
Vue.use(Vuex);
const router = new VueRouter({
routes,
mode: history
});
Vue.config.devtools = true;
new Vue({
router,
render: h => h(App)
}).$mount('#app');
and my blade
<div id="app">
<App></App>
</div>
<script src="{{ asset('js/app.js') }}"></script>
this is the code I write in App.vue
<template>
<div class="app">
<h1 class="display-4">Hello World from App.vue</h1>
<router-view />
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import App from './views/App'
import Hello from './views/Hello'
import Home from './views/Home'
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/hello',
name: 'hello',
component: Hello,
},
],
});
then in your blade file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue SPA</title>
</head>
<body>
<div id="app">
<app></app>
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
also make sure to add this route
Route::get('/{any}', 'SpaController#index')->where('any', '.*');
You can register components like this:
Vue.component("Name", require("./components/Name.vue").default);
app.js:
require('./bootstrap');
import Vue from 'vue';
import VueRouter from 'vue-router';
import Vuex from 'vuex';
import routes from './routes'
import App from './App'
Vue.use(VueRouter);
Vue.use(Vuex);
const router = new VueRouter({
routes,
mode: history
});
Vue.config.devtools = true;
//import components
Vue.component(
'app',
require('./components/App.vue').default);
new Vue({
router,
render: h => h(App)
}).$mount('#app');
UPDATE:: I believe that it has to do with Vue Router, when I use that, it will not work in the remote env. I made sure that I installed vue-router package. The question is why it would show empty.
In my local environment, the Vue JS setup works fine but when I deploy it in the remote server, it shows blank. There is no console error or anything to even debug.
here is my app.js file where I know i set it up corrctly
import './bootstrap';
import Vue from 'vue';
//import Routes from './routes';
import App from './views/App';
import VueRouter from 'vue-router';
import Login from "./components/Login";
import Dashboard from "../js/components/user/Dashboard";
Vue.use(VueRouter);
window.Axios = require('axios');
const router = new VueRouter({
mode: 'history',
routes:[
{
path: '/',
name: 'login',
component: Login
},{
path: '/dashboard',
name: 'dashboard',
component: Dashboard
}
]
});
const app = new Vue({
el: '#app',
template: '<div>hello</div>',
//router: router,
//render: h => h(App),
});
export default app;
As you can see i'm only trying to spit out "hello" in the view but it's not even showing anything.
How do i debug?
The server is in linux env and using apache web server. My local is in php artisan server. Vue Js is a part of laravel 6.* and shown inside the blade template.
html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>----</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="http://159.203.117.201/stockman/css/styles.css">
<script>window.laravelToken = 'fzBmxRrJJALZ2CoUVQXbII9LxXbC7YuCbnmLwji0';</script>
</head>
<body>
<div id="app"></div>
<script src="----/js/app.js"></script>
</body>
</html>
I'm trying to create an SPA using Vuejs and Laravel. I've installed vue-router to accomplish that. The component that has to be rendered inside the
<router-view />
tag is not rendering.
I've tried creating a new project and installing npm and vue-router again.
It still does not work.
Laravel Version : 5.8.18
vue-router : 3.0.6
welcome.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
</head>
<body>
<div id = "app">
<router-view></router-view>
</div>
<script src = "js/app.js"></script>
</body>
</html>
app.js(./resources/js/app.js)
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'
Vue.use(VueRouter)
const app = new Vue({
el: '#app',
router: new VueRouter(routes)
});
routes.js(./resources/js/routes.js)
import Home from './components/Home'
export default {
mode: 'history',
routes: [
{
path: '/',
component: Home
}
]
}
Home.vue(./resources.components/Home.vue)
<template>
<p>Home</p>
</template>
<script>
export default {}
</script>
web.php
<?php
Route::get('/{any?}', function () {
return view('welcome');
});
Your code works for me. Remember to use
npm run watch