I'm having an issue with Vue Components. The compiling goes fine but when I try to preview the page it gives me the following error:
[Vue warn]: Failed to mount component: template or render function not defined.
app.js
require('es6-promise').polyfill();
require('./bootstrap');
import PM from './class.pm.js';
import Validator from './class.Validator.js';
import 'jquery-ui/ui/widgets/autocomplete.js';
import 'select2/dist/js/select2.full.js';
window.Vue = require('vue');
Vue.component('terms', require('./components/legal/terms.vue').default);
package.json
{
"name": "responseconcepts",
"version": "1.0.0",
"description": "Responseconcepts",
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.18.1",
"bootstrap": "^4.4.1",
"browser-sync": "^2.26.7",
"browser-sync-webpack-plugin": "^2.0.1",
"cross-env": "^5.1",
"fontfacegen": "^0.3.1",
"gifsicle": "^4.0.1",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^6.0.0",
"gulp-changed": "^3.2.0",
"gulp-clean": "^0.4.0",
"gulp-concat": "~2.5.2",
"gulp-concat-css": "^2.2.0",
"gulp-css-rebase-urls": "0.0.5",
"gulp-debug": "^2.1.2",
"gulp-filenames": "^4.0.1",
"gulp-fontgen": "^0.2.5",
"gulp-if": "^2.0.2",
"gulp-imagemin": "^6.2.0",
"gulp-livereload": "^4.0.2",
"gulp-load-plugins": "^2.0.1",
"gulp-rename": "^1.2.2",
"gulp-sass": "^4.0.1",
"gulp-uglify": "^3.0.2",
"gulp-uglifyjs": "~0.6.1",
"gulp-watch": "^5.0.1",
"html-loader": "^0.5.5",
"imagemin-jpeg-recompress": "^6.0.0",
"imagemin-pngquant": "^8.0.0",
"jquery": "^3.4.1",
"jquery-ui": "^1.12.1",
"laravel-mix": "^5.0.0",
"lodash": "^4.17.15",
"map-stream": "0.0.7",
"minimist": "^1.2.0",
"popper.js": "^1.12",
"resolve-url-loader": "^3.1.0",
"sass-loader": "^8.0.0",
"ttf2woff2": "^3.0.0",
"vue": "2.5.17",
"vue-template-compiler": "2.5.17"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^5.6.3",
"codemirror": "^5.43.0",
"es6-promise": "^4.2.6",
"font-awesome": "^4.7.0",
"natives": "^1.1.6",
"node-sass": "^4.10.0",
"select2": "github:select2/select2",
"spectrum-colorpicker": "github:bgrins/spectrum",
"summernote": "^0.8.11"
}
}
I think i've been searching for about 4-5 hours now and the articles that I saw are all saying I should add the ".default" after the require statement. Which I did. But it still keeps on giving me the same error.
update to show terms.vue
<template>
<div class="modal" id="modal-terms-and-conditions" tabindex="-1" role="dialog"
aria-labelledby="modal-terms-and-conditions">
<div class="container">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body" v-html="html"></div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
html: String
}
};
</script>
<style lang="scss">
#modal-terms-and-conditions {
.modal-body {
@media (max-width:991px) {
height: 86vh;
overflow-y: scroll;
}
}
}
</style>
terms.vue?