Level 6
Sounds silly, but just to be sure: did you include the main.js within your index.html?
Aug 25, 2021
12
Level 1
Vue single-file-component weirdly not showing in page
I'm not very new to Vue but this time I spent the whole day on this skeleton, no errors in browser, Webpack compiles successfully, but the "hello from dashboard" doesn't show up in the page
I think it has something to do with the render function, I've read the docs, still can't find the issue
main.js
import Vue from 'vue'
Vue.component('dashboard', require('@comp/dashboard.vue').default);
const app = require('@/App.vue').default; // this app component works fine
import "./css/app.css"
new Vue({
render: h => h(app) // this app component works fine
}).$mount('#app')
dashboard.vue
<template>
<div>
Hello from dashboard
</div>
</template>
<script>
export default {
name: "dashboard"
}
</script>
index.html
<body>
<div id="app">
<dashboard></dashboard>
</div>
</body>
this is the rendered HTML from the browser, However, "hello from dashboard" is not there :(
<body>
<div id="app">
<dashboard></dashboard>
</div>
</body>
Level 1
Yes, The Vue instance is mounted, the vue-devtool is seeing it as well as "App.vue component", but not "dashboard"
Level 102
Did you perhaps forget to recompile ? npm run dev
Level 1
many times
Level 102
Any errors in the console tab?
Level 1
none
Level 1
this is my webpack.config.js
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require("html-webpack-plugin")
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
resolve: {
alias: {
'@': path.resolve('src'),
'@comp': path.resolve('src/components'),
}
},
mode: 'development',
devtool: 'inline-source-map',
entry: {
main: './src/main.js'
},
output: {
filename: '[name].[contenthash].js',
chunkFilename: '[name].[contenthash].js',
path: path.resolve(__dirname, 'public'),
clean: true,
},
module: {
rules: [
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
},
{
test: /\.css$/i,
use: [
'style-loader',
{
loader: MiniCssExtractPlugin.loader,
options: {
esModule: false,
}
},
{
loader: 'css-loader',
},
'postcss-loader',
]
},
{
test: /\.vue$/i,
loader: 'vue-loader'
}
]
},
plugins: [
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
}),
new HtmlWebpackPlugin({
title: 'bitchh',
publicPath: './',
template: './src/index.html',
}),
/*new BrowserSyncPlugin({
host: 'localhost',
port: 6868,
server: {
baseDir: ['public']
},
}),*/
],
devServer: {
client: {
progress: true,
logging: 'warn',
},
liveReload: true,
open: true,
setupExitSignals: true,
compress: true,
port: 6866,
},
}
Level 1
@sinnbeck I uploaded it here, much appreciate if u have a look https://github.com/Z3yko/vue-app
Level 102
I dont use vue myself, but had a quick look. Instead of adding dashboard inside the html file, try adding it to the App.vue
<template>
<div>
hi from App.vue
<dashboard></dashboard>
</div>
</template>
1 like
Level 1
it works when I put </dashboard> inside App.vue template, but it doesnt when </dashboard> is in index.html, despite the 'global' registration
Level 1
Okaaay i get it, because the App.vue is the one mounted on the div id="app" so it should be the starting point, I barely get it but there is a light :)
Level 102
Yeah otherwise I would think you would use something like this (again, I dont use vue, but its what I understand from the docs)
var app = new Vue({
el: '#app',
})
1 like
Please or to participate in this conversation.