Vue Failed to mount component: template or render function not defined

Question

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>

Answer 1

Did you mount the Vue app? You are missing that code from your app.js file.

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

Edit 2

Use the import syntax

import Terms from './components/legal/terms.vue';
Vue.component('terms', Terms);