Myujth

Some components cannot be injected into the App.vue template. Particularly, the Login.vue is the one that is causing issues. If I create it from scratch while the server is running (npm run dev) it will work, but once I restart it and navigate to the Login component, it will fail to load.

Stack Trace

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <Login>
 <App> at src/App.vue
 <Root>

src/components/Login.vue

<template>
 <div id="login">
 <ul>
 <li><input type="text" v-model="username" placeholder="Username"></li>
 <li><input type="password" v-model="password" placeholder="Password"></li>
 <li><button @click="login(username, password)">Login</button></li>
 </ul>
 </div>
</template>

<script>
</script>

<style scoped>

#login
 padding-top: 100px;


ul 
 list-style-type: none;
 padding: 0;


li 
 display: inline-block;
 margin: 0 10px;


</style>

src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import RideSharing from '@/components/RideSharing'
import Login from '@/components/Login'
import About from '@/components/About'

Vue.use(Router)

export default new Router(
 routes: [
 
 path: '/',
 name: 'Hello',
 component: Hello
 ,
 
 path: '/app',
 name: 'RideSharing',
 component: RideSharing
 ,
 
 path: '/app/login',
 name: 'Login',
 component: Login
 ,
 
 path: '/app/about',
 name: 'About',
 component: About
 
 ]
)

src/App.vue

<template>
 <div id="app" :style="padding: $route.path === '/' ? '172px' : '10px'">
 <div>
 <img src="./assets/logo4.png" align="center">
 </div>
 <router-view></router-view>
 </div>
</template>

<script>
export default 
 name: 'app'

</script>

<style>
#app 
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 background-color: hsla(269, 96%, 50%, 0.73);
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 0px;
 height: inherit;


body
 height: inherit;


html
 height: 100%;

</style>

src/main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import BootstrapVue from "bootstrap-vue"
import App from './App'
import router from './router'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue(
 el: '#app',
 router,
 template: '<App/>',
 components: App 
)

If you are using the full build version of Vue then you could try to mount the DOM template using .$mount('#app')

So, in your main.js, your app script would look like this:

new Vue(
 router,
 template: '<App/>',
 components: App ,
).$mount('#app')

SOLUTION:

Missing .vue extensions in imports.

src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello.vue'
import RideSharing from '@/components/RideSharing.vue'
import Login from '@/components/Login.vue'
import About from '@/components/About.vue'