I have been trying to setup a simple vue application using VueRouter with Laravel. But the vue-router is not loading the components properly.
welcome.blade.php
<body>
<div id="app">
<main-app/>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
app.js
//import Vue from 'vue';
window.Vue = require('vue');
import VueRouter from 'vue-router';
import {
routes
} from './routes';
import MainApp from './components/MainApp.vue';
Vue.use(VueRouter);
const router = new VueRouter({
routes,
mode: 'history'
});
const app = new Vue({
el: '#app',
router,
components: {
MainApp
}
});
routes.js
import Home from './components/Home.vue'
export const routes = [{
path: '/',
component: Home,
name: 'Home'
}];
MainApp.vue
<template>
<div id="main">
<router-view></router-view>
</div>
</template>
If http://localhost:8080/vue-spa is dialed, "Home component" should be displayed (which we are displaying in Home.vue). But , nothing is displaying.
Screenshot of Dev Tools
I am new to Vue , help to find a solution for this.
Your routes.js should be -
import Home from './components/Home.vue'
export const routes = [{
path: '/vue-spa',
component: Home,
name: 'Home'
}];
Also, make sure the following is done -
You have executed the npm install command in your project. This will install the laravel-mix package, necessary for compiling your js files. (Learn more)
Then once you have your laravel-mix installed, configure the webpack.mix.js file present in your root folder. In your case (assuming the app.js file where you have written your js code is present in resources/js) the webpack.mix.js should look like -
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js');
This will yield the compiled resourses/js/app.js file in public/js/app.js
Once that is done execute npm run watch. This will recompile the public/js/app.js file every time you make any changes in your resources/js/app.js code or its imported files.
Another very important step would be to set up Laravel's routes so that any request the server receives gives an entry point to your vue.js SPA. This is the probable reason that you are getting a 404 page. Define the following route in your web.php to enable that -
<?php
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::view('/{any}', 'welcome')->where('any', '.*');
Related
I am using Laravel 8 Vuejs 2.17 and VueRouter 3.4,
i have two components Orders.vue and Users.vue
this is how my app.js looks like
require("./bootstrap");
window.Vue = require("vue");
import Vue from "vue";
//? Vue router
import VueRouter from "vue-router";
import routes from "./routes";
Vue.use(VueRouter);
const router = new VueRouter({
routes
});
new Vue({
router,
}).$mount("#app");
and here is how router.js looks like
import Orders from './appComponents/Orders';
import Users from './appComponents/Users';
const routes = [
{
path: "/admin/orders",
name: 'orders',
component: Orders,
},
{
path: "/admin/users",
name: 'users',
component: Users,
},
];
export default routes;
i called the routes in my laravel view like :
<router-link :to="{ name: 'users' }">users</router-link>
<router-link :to="{ name: 'orders' }">Orders</router-link>
the browser response with
[vue-router] Route with name 'users' does not exist
[vue-router] Route with name 'orders' does not exist
i also tried to call the routes by its path but still not working, anyone please can help me.
i found the solution, i've installed a an npm modules, and there was a conflict between the module app.js and my app.js
I am using Laravel. the Frontside is developed by Blade and vue.
After Installing "vuetify". The other component which I have been using happened an error.
I don't know what is going on. the component doesn't be shown in the div.
when "const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');" is removed from mix.webpackconfig, the error from Calendar disappeared.
Is that related to installing "vuetifty"?
ERROR
[Vue warn]: Error in render: "TypeError: Cannot read property 'lang' of undefined"
found in
---> <VCalendarMonthly>
<VCalendar>
<ACalendar> at resources/js/components/ACalendar.vue
<Root>
app.js
Code
window.Vue = require('vue');
Vue.use(require('v-calendar'));
Vue.component('a-calendar', require('./components/ArticleCalendar.vue').default);
const app = new Vue({
el: '#app'
});
<script src=" {{ mix('js/app.js') }}"></script>
<div id="app">
<a-calendar url="{{ url }}"></a-calendar>
</div>
ACalendar.vue
<template>
<div>
<v-calendar v-on:dayclick="dayclick"></v-calendar>
</div>
</template>
export default {
data(){
return {
items:[
],
isLoaded : false,
isLoading : false,
isError : false,
}
},
props: {
url : String
},
}
</script>
const mix = require('laravel-mix');
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.webpackConfig({
plugins: [
new VuetifyLoaderPlugin(),
],
});
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/chat.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.version();
app.scss
// Fonts
#import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
#import 'variables';
// Bootstrap
#import '~bootstrap/scss/bootstrap';
When I removed mix.webpackConfig and VuetifyLoaderPlugin,The calendar component works well.
After recently applied vuetify inside laravel 7 means with vuejs, I wasn't able to configure the vuetify actual settings, but that's what I have done and it works normal now.
Also I want to mention that vuetify has almost everything like calendars, tables buttons, forms etc...
resources/sass/app.scss
// Fonts
#import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
#import 'variables';
// Icons
#import '~#mdi/font/css/materialdesignicons.min.css';
#import '~material-design-icons-iconfont/dist/material-design-icons.css';
// Bootstrap
//#import '~bootstrap/scss/bootstrap';
// Vuetify
#import '~vuetify/dist/vuetify.min.css';
Note I have left the webpack.mix.js as it is
resources/js/app.js
require('./bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router'
import Vuetify from 'vuetify';
Vue.use(VueRouter);
Vue.use(Vuetify);
import {routes} from './routes';
import App from './components/App.vue';
const app = new Vue({
el: '#app',
vuetify: new Vuetify(),
router: new VueRouter({mode: 'hash', routes}),
render: h => h(App)
});
View where components are rendering means where app id is located
//Inside head tag
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
//Inside body tag
<v-app id="app"></v-app>
<script src="{{ asset('js/app.js') }}"></script>
This way I have configured my newly vuejs project with vuetify inside laravel 7, everythings is working fine, I might have misconfigured something means there might be a good approach than mine. But for me it's working now.
When reloading my single page application, I would like the url to load correctly instead of throwing a 404 error. Using Laravel 5.6, Vue.js 2.6, & MAMP.
I have tried the following code, however, I am loading different app.js files in the same welcome view based on what the URL is. Because of this structure,, this solution is not working:
Route::get('/{vue_capture?}', function () {
return view('welcome', ['app_path' => 'load different vuejs apps here in my routes/web.php file based on the url']);
})->where('vue_capture', '[\/\w\.-]*');
I would like to have refresh work with my vue router. Any suggestions, either having to do with my routes/web.php file or .htaccess file is appreciated.
Note: This .htaccess file configuration was not working for me (apache):
https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations
//welcome blade
<div id="app">
<app></app>
</div>
<script src="{{ asset($app_path) }}"></script>
//app.vue
<div class="container-fluid px-0">
<router-view/>
</div>
Well, as far I can see, your approach was good. You are capturing all GET requests, and passing them to your Blade view.
My suggestion:
Cleaner route:
Route::get('/{any}', 'YourController#index')->where('any', '.*');
Your app.js (main JS file should look something like this):
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import App from './views/App'
import About from './views/About'
import Home from './views/Home'
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About,
},
],
});
const app = new Vue({
el: '#app',
components: { App },
router,
});
With all this configuration and your router-view, you should be fine.
I am trying to figure out how I will deploy a Vue SPA with a Laravel backend on Ubuntu on DigitalOcean
I am currently able to deploy Laravel apps on Digital Ocean with no problem at all. My new challenge is that I am creating an SPA with the Vue-Webpack template and using a standalone Laravel app as backend.
I am not sure how I will deploy this and structure my folders on Ubuntu.
one way is to keep your projects in /var/www/ side by side in two folders(laravel-api and vue-app). another way is placing your app contents inside laravel-app's resources folder. configure nginx or apache to serve the laravel api backend only.
see http://vuejs-templates.github.io/webpack/backend.html
update config/index.js
var path = require('path')
module.exports = {
build: {
index: path.resolve(__dirname, 'dist/index.html'),
assetsRoot: path.resolve(__dirname, 'dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
productionSourceMap: true
},
dev: {
port: 8080,
proxyTable: {}
}
}
from the docs
build.index
Must be an absolute path on your local file system.
This is where the index.html (with injected asset URLs) will be
generated.
If you are using this template with a backend-framework, you can edit
index.html accordingly and point this path to a view file rendered by
your backend app, e.g. app/views/layouts/application.html.erb for a
Rails app, or resources/views/index.blade.php for a Laravel app.
build.assetsRoot
Must be an absolute path on your local file system.
This should point to the root directory that contains all the static
assets for your app. For example, public/ for both Rails/Laravel.
What you should do is serve your main index file through Laravel routes or some other method of serving. lets say you have home.blade.php as index file
1 - show application entry point
routes.php / web.php
Route::get('/', function() {
return view('home');
});
this index file should contain the app element. then you should use vue-router for navigation which will add # after index url.
Here is how to configure javacript part
2 - Install and Import VueRouter to /resources/assets/js/bootstrap.js
3 - Use Vue router with Vue ( Vue.use(VueRouter);)
bootstrap.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import axios from 'axios';
window.Vue = Vue;
Vue.use(VueRouter);
window.axios = axios;
window.axios.defaults.headers.common = {
'X-Requested-With': 'XMLHttpRequest'
};
4 - Create /resources/assets/js/routes.js file
5 - Import vue router
6 - define routes
7 - Export routes
routes.js
import VueRouter from 'vue-router';
let routes = [
{
path: '/',
component: require('./views/Home')
},
{
path: '/another',
component: require('./views/Another')
}
];
export default new VueRouter({
routes
})
8 - Create /resources/assets/js/ app.js file which would be the javascript main app
9- require the bootstrap.js and Import routes.js file we created
10 - Use it set router: router (as we are using ES6 just router as defined below would be considered as router:router)
11 - Thats the new Vue app there
app.js
require('./bootstrap');
import router from './routes';
new Vue({
el: '#app',
router
//app works go here
});
12 - Use app.js in the home.blade.php
13 - Add router links
14 - Add router view
home.blade.php
<!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">
<title>My App</title>
</head>
<body>
<div id="app">
<section class="section">
<div class="container">
<nav class="tabs is-boxed">
<div class="container">
<ul>
<router-link tag="li" to="/" exact>
<a>Home</a>
</router-link>
<router-link tag="li" to="/another">
<a>Another</a>
</router-link>
</ul>
</div>
</nav>
<router-view></router-view>
</div>
</section>
</div>
<script src="/js/app.js"></script>
</body>
</html>
15 - Remember to run webpack.
Good luck
I am assuming you have two folders for your project: client where your vue.js code goes in, and server where your backend code lives.
The short answer
Just copy the SPA build files (located in client/dist folder by default) into your server/public folder and deploy it (The same thing is true with express for Node.js).
But you can do it better
Surely you want to avoid the manual work of copying static files from client/dist to server/public on every build you do. This is easy, all you need is just changing the build folder in your client/config/index.js and make it your server/public instead of the default client/dist.
client/config/index.js:
build: {
// change "../dist" to "../../server/public" in both rules
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
}
This is the recommended way to do it as described in the webpack template guide.
Check out my new project Laravue-SPA. It's a framework that pulls together Laravel, Vue.js and Vuetify to create a single page application.
It's brand new and still pre alpha release but I'll be happy to provide support and fix bugs as they're discovered!
Plus it will introduce you to the concepts needed to create an SPA even if you go off in your own direction.
I start up a new Laravel + Vue + Stylus project, and i can't normally work because i always got blank page when adding/editing some styles on .styl files. And when i edit my .vue templates it come back to normal state.
My main.js file:
import Vue from 'vue';
import VueRouter from 'vue-router';
import { routes } from './routes/index';
import App from './App.vue';
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
routes
});
new Vue({
el: '#app',
router,
render: h => h(App)
});
My webpack.mix.js file:
mix.js('resources/assets/js/main.js', 'public/js')
.stylus('resources/assets/stylus/app.styl', 'public/css')
.browserSync('localhost:8000');
Some strange thing that i noticed is that when i save my .styl file i got main.js like prod version(not compiled) and in console has an error:
Uncaught SyntaxError: Unexpected token import
If i save this file again i got normal compiled main.js file, but it doesn't render my App
And finally when i edit .vue templates all works perfect.