VueCompilerError: Element is missing end tag

user_10950890 0
Viewed 4744

i've started working with vuejs recently and i don't seem to figure out this error is shows.

enter image description here

And it shows the error Even though the html if fully there and there are no missing tags.

i've tried, removing comments, cleaning the file structure of the vue project.

Any help is appreciated thank you

HTML CODE, test.vue file :

<template>

        <div id="wrapper">
            <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
                Sidebar - Brand
                <a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
                    <div class="sidebar-brand-icon rotate-n-15">
                        <i class="fas fa-laugh-wink"></i>
                    </div>
                    <div class="sidebar-brand-text mx-3">John Doe</div>
                </a> </ul> </div> </template>
vuejs2 vuejs3 vue.js frontend html
2 Answers

Your vue code is fine. Recompile your project. I have this issue occasionally. Recompiling always fixes it.

Ctrl + C

npm run serve

user_95493420

I got this error while having a vite.config.ts that looked like this:

import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [vue()]
});

If I remove plugins: [vue()], the error goes away.

user_42459850
Related