Vue 3 Component not showing - blade is showing

Hello, My vue component is now displaying on the webpage but the content on blade is showing.

I have used laravel 8, vue3, vue-router 4 and bootstrap 5.

Similar technologies on another demo project is working.

on console - I got warning like this ->

app.js:12228 You are running the esm-bundler build of Vue. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle. See http://link.vuejs.org/feature-flags for more details.
app.js:8786 [Vue warn]: Failed to mount app: mount target selector "#app" returned null.

2nd one is the main issue I think.

on app.js

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min';
import { createApp } from 'vue'
import router from './router'
import App from './App.vue'
const app = createApp(App)
app.use(router)
app.mount('#app')

on App.vue

<template>
  <div class="text-center">
    <h1 class="text-bold"> Namaste from vue component </h1> <!-- this is not showing on page -->
    </div>
  <router-view></router-view>
</template>
<script>
export default {
  name: 'App'
}
</script>

on blade

<body class="text-center">
  <div>
    <h2>Hello laravel 8</h2> <!-- it is displaying with text center, that is from bootstrap included on app.js
-->
  </div>
  <div id="#app"></div>
  <script src="{{ mix('js/app.js') }}"></script>
</body>

on router/index.js

import { createRouter, createWebHistory } from 'vue-router';

import Home from '../components/Home.vue';

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
];

const router = createRouter ({
  history: createWebHistory(),
  routes
});

export default router;

on package.json

"devDependencies": {
        "@popperjs/core": "^2.9.2",
        "@vue/compiler-sfc": "^3.0.11",
        "axios": "^0.21",
        "bootstrap": "^5.0.0",
        "laravel-mix": "^6.0.19",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^3.1.3",
        "sass": "^1.32.12",
        "sass-loader": "^11.0.1",
        "vue": "^3.0.11",
        "vue-loader": "^16.2.0",
        "vue-router": "^4.0.6",
        "vue-template-compiler": "^2.6.12",
        "vuex": "^4.0.0"
    },
    "dependencies": {
        "audit": "0.0.6",
        "core-js": "^3.12.1",
        "fix": "0.0.6",
        "npm": "^7.12.0"
    }

I hope to find solution soon.

bhojkamal

5 years ago

Best Answer

Level 1

Hello,

It is a silly mistake. On blade I put id="#app". It should be just id="app".
I found my mistake.

1 like

bhojkamal

5 years ago

Level 1

But I am wondering this warning on console -

app.js:12228 You are running the esm-bundler build of Vue. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle. See http://link.vuejs.org/feature-flags for more details.

and

DevTools failed to load SourceMap: Could not load content for http://localhost:8000/js/bootstrap.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE