Laravel initializing vuejs for new project

Question

After installing fresh installation of Laravel i installed VueRouter and after implementing simple code for that such as below, i can't use VueJs and i don't get any error in terminal:

commands don't show any error and i get build successful from Laravel mix /resources/js/app.js content:

GITHUB project link:

import Vue from "vue";
import VueRouter from 'vue-router';
import ExampleComponent from "./components/ExampleComponent";

require('./bootstrap');


const routes = new VueRouter(
    {
        mode:'history',
        routes:[
            {
                path:'/',
                component:ExampleComponent
            }
        ]
    }
);
const app = new Vue({
    el: '#app',
    routes
});

/resources/js/bootstrap.js content:

window._ = require('lodash');

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

app.blade.php content:

<!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 href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
    @yield('content')
</div>
</body>
</html>

welcome.blade.php content:

@extends('layouts.app')

@section('content')
    <div class="container">
        <router-view></router-view>
    </div>
@endsection

laravel web.php content:

Route::get('/{any}', function () {
    return view('welcome');
})->where('any','.*');

simple piece of laravel composer.json:

"require": {
    "php": "^7.3|^8.0",
    "fideloper/proxy": "^4.4",
    "fruitcake/laravel-cors": "^2.0",
    "guzzlehttp/guzzle": "^7.0.1",
    "laravel/framework": "^8.12",
    "laravel/tinker": "^2.5",
    "laravel/ui": "^3.2"
},

webpack.mix.js content:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/app.scss', 'public/css');

and then:

php artisan serve && npm run watch

i have empty page after navigating to / in browser http://127.0.0.1:8000

how can i resolve this issue to use vuejs?

Mi-Creativity · Accepted Answer · 2021-03-11 15:10:49Z

1

Concerning Vue router, what I usually have is a separated router.js file because it can be lengthy:

import Vue from 'vue'
import Router from 'vue-router'
...
Vue.use(Router)
const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/users',
      name: 'users',
      component: () => import('./views/users/_users.vue'),
    }
    ...
 ]

 export default router

And in main.js I have:

import router from './router' // path to router.js file
...
Vue.router = router
...

export default new Vue({
  store,
  router,
  render: h => h(App)
}).$mount('#app')

edited Mar 11, 2021 at 15:10

answered Mar 11, 2021 at 15:03

Mi-Creativity

9,66410 gold badges40 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

DolDurma Over a year ago

what are store and render in your code?

Mi-Creativity Over a year ago

store is for Vuex I forgot to remove it I apologize, about render forum.vuejs.org/t/what-does-render-h-h-app-mean/53313 expand the answer to see it fully

DolDurma Over a year ago

thanks so much, i have laravel with vuejs now

Mi-Creativity Over a year ago

I'm glad it helped.. good luck at that and enjoy coding

Martin Zeitler · Accepted Answer · 2021-03-11 14:58:22Z

1

These constraints are appearently superfluous: ->where('any','.*').

And the route might not match - or .htaccess might be absent;
eg. to capture regex (.*) into variable $page for any method:

Route::any('(.*)', function($page) {
    // dd($page);
    return view('welcome');
});

Not sure, but you probably also need to Vue.use(VueRouter); the docs also initialize differently:

const app = new Vue({routes}).$mount('#app')

I mean, there is no debug information and there are even two ways how to install VueRouter.

edited Mar 11, 2021 at 14:58

answered Mar 11, 2021 at 14:22

Martin Zeitler

79.6k20 gold badges169 silver badges243 bronze badges

Collectives™ on Stack Overflow

Laravel initializing vuejs for new project

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related