Level 73
@matheenulla in some of your components, do you have this:
<script src="http://127.0.0.1:8000/js/sb-admin-2.min.js"></script>
Or any other script that you are trying to load? You should remove those from the Vue files.
Dec 27, 2019
8
Level 51
[Vue warn]: Error compiling template:
Hi
I just started with VueJs Everything is working fine but I am getting an error in console like this
app.js:41046 [Vue warn]: Error compiling template:
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
189| <script src="http://127.0.0.1:8000/js/sb-admin-2.min.js"></script>
191| <script src="http://127.0.0.1:8000/vendor/chart.js/Chart.min.js"></script>
192| <script src="http://127.0.0.1:8000/js/demo/chart-area-demo.js"></script>
193| <script src="http://127.0.0.1:8000/js/demo/chart-pie-demo.js"></script>
194| <script src="http://127.0.0.1:8000/js/app.js"></script></div></div></div>
my form
home.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Admin Panel</title>
<link href="{{ url('vendor/fontawesome-free/css/all.min.css')}}" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- Custom styles for this template-->
<link href="{{ url('css/sb-admin-2.min.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
@include('layouts.sidebar')
<router-view></router-view>
</div>
@include('layouts.footer')
<script src="{{ url('vendor/jquery/jquery.min.js') }}"></script>
<script src="{{ url('vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ url('vendor/jquery-easing/jquery.easing.min.js') }}"></script>
<script src="{{ url('js/sb-admin-2.min.js') }}"></script>
<script src="{{ url('vendor/chart.js/Chart.min.js') }}"></script>
<script src="{{ url('js/demo/chart-area-demo.js') }}"></script>
<script src="{{ url('js/demo/chart-pie-demo.js') }}"></script>
<script src="{{ url('js/app.js') }}"></script>
</body>
</html>
Level 51
@nakov no this is my first component and I am not using anything like this.
this is my component
<template>
<div class="container">
<h1>This is dashboard</h1>
</div>
</template>
<script>
export default {
mounted() {
console.log('loaded');
}
}
</script>
Level 73
So do you have Vue initialzed to the body tag or to the #app?
Level 51
yes I am using <router-link> in body tag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="
viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Admiin Panel</title>
</head>
<body id="page-top">
<div id="wrapper">
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
<li class="nav-item active">
<router-link to="/dashboard" class="nav-link" exact>
<i class="fas fa-fw fa-tachometer-alt"></i>
<a>Dashboard</a>
</router-link>
</li>
<li class="nav-item active">
<router-link to="/dashboard" class="nav-link" exact>
<i class="fas fa-fw fa-tachometer-alt"></i>
<a>Dashboard</a>
</router-link>
</li>
</ul>
</body>
</html>
Level 73
As I can see in the last view that you shared, the div with id wrapper is not closed, so before the closing body tag, add </div>
Level 51
@nakov If I closed div than sidebar will not work
Level 73
@matheenulla I don't understand that.. But anyway, you've got broken HTML this way, if the Vue is initialized on the wrapper, it will throw errors, as the page is mixed with scripts.
Level 51
@nakov I am using left fixed sidebar so I am not closing that div. But Now I got the error why it is coming thank you very much
Please or to participate in this conversation.