Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.2k views
in Technique[技术] by (71.8m points)

vue.js - Laravel 8 and Vue Js page vue template not displaying

I installed a fresh Laravel 8 and Vue js. upon installing the npm and vue it installs well. Now my problem is when i run the npm run watch then load the page it is a blank white page

my testapp.vue

<template>
    <div>
        <h1>Hello world! asasasaas</h1>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

my views/testpage.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Testpage</title>
</head>
<body>
    <div id="app">
       <main-app></main-app>
    </div>
</body>
 <script src="{{ asset('js/app.js') }}"></script>
</html>

my js/app.js file

require('./bootstrap');

window.Vue = require('vue');

Vue.component('main-app', require('./components/TestApp.vue').default);


const app = new Vue({
    el: '#app'
});

my webpack.mix.js

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */



mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
       // require('postcss-import'),
      //  require('tailwindcss'),
      //  require('autoprefixer'),
    ])
    .vue();

my route/web

Route::get('/test', [TestController::class, 'index']);

Can someone help me figured this thing out? when i load the page it is a blank white page. it seems the vue is not loaded.

TIA

question from:https://stackoverflow.com/questions/65832965/laravel-8-and-vue-js-page-vue-template-not-displaying

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
Waitting for answers

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...