app.js:10567 [Vue warn]: Component is missing template or render function

Question

No clue where the error coming from, hours trying to find it. All the components the same. Configure vue router is a nightmare.

Error:

app.js:10567 [Vue warn]: Component is missing template or render function. at <CreateProduct onVnodeUnmounted=fn ref=Ref< undefined > > at at at

http://localhost

http://localhost/create

router.js

import AllProduct from './components/AllProduct.vue';
import CreateProduct from './components/CreateProduct.vue';
import EditProduct from './components/EditProduct.vue';

import {createWebHistory, createRouter} from "vue-router";
 
const routes = [
    {
        name: 'home',
        path: '/',
        component: AllProduct
    },
    {
        name: 'create',
        path: '/create',
        component: CreateProduct
    },
    {
        name: 'edit',
        path: '/edit/:id',
        component: EditProduct
    }
];

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

export default router;

app.js

 require('./bootstrap');

import { createApp,h } from 'vue';
import router from './routes';
import App from './App.vue';
import axios from 'axios'

const app = createApp({ render: () => h(App) });
app.config.globalProperties.$axios = axios;
app.use(router);
app.mount('#app');

App.vue

<template>
    <div class="container"> 
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="collapse navbar-collapse">
                <div class="navbar-nav">
                    <router-link to="/" class="nav-item nav-link">Products List</router-link>
                    <router-link to="/create" class="nav-item nav-link">Create Product</router-link>
                </div>
            </div>
        </nav>
        <router-view> </router-view>
    </div>
</template>
 
<script>
    export default {}
</script>

AllProducts.vue

<template>
    <div>
        <h2 class="text-center">Products List</h2>
 
        <table class="table">
            <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Detail</th>
                <!-- <th>Actions</th> -->
            </tr>
            </thead>
            <tbody>
            <tr v-for="product in products" :key="product.id">
                <td>{{ product.id }}</td>
                <td>{{ product.name }}</td>
                <td>{{ product.detail }}</td>
                <td>
                    <div class="btn-group" role="group">
                        <router-link :to="{name: 'edit', params: { id: product.id }}" class="btn btn-success">Edit</router-link>
                        <button class="btn btn-danger" @click="deleteProduct(product.id)">Delete</button>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</template>
 
<script>
    export default {
        data() {
            return {
                products: [] 
            }
        },
        created() {
            this.axios
                .get('/api/products/')
                .then(response => {
                    this.products = response.data;
                });
        },
        methods: {
            deleteProduct(id) { 
                this.axios
                    .delete(`http://localhost:8000/api/products/${id}`)
                    .then(response => {
                        let i = this.products.map(data => data.id).indexOf(id);
                        this.products.splice(i, 1)
                    });
            }
        }
    }
</script>

Answer 1

if you read the red error, it says cannot read propertie of undefined (reading 'get')

That means your trying to access the get propertie of an undefined object

looking for getin your code, we find :

this.axios
    .get('/api/products/')

so that means this.axios is undefined

it's undefined cause you declared it like this :

app.config.globalProperties.$axios = axios;

with a $ sign