Level 47
page not found
and , are you using laravel with Vue?
cos , your code looks like you are using your own css and js files without webpack.
really not sure it's a vue issue.
can you show the whole error message?
Sep 2, 2018
7
Level 5
Templates should only be responsible for mapping the state to the UI.
Hi everybody,
since I am using https://github.com/anhskohbo/no-captcha/blob/master/README.md , I am getting the following error message:
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.
This is the full HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="MUWWzNyxBfdhwOkDs7yKfBu8aBTmemlTEidTDN7c">
<title>Title</title>
<!-- Styles -->
<link href="http://127.0.0.1:8000/css/app.css" rel="stylesheet">
<link href="http://127.0.0.1:8000/css/custom.css" rel="stylesheet">
</head>
<body>
<div id="app">
<div class="uk-offcanvas-content">
<header id="top-head" class="uk-position-fixed">
<div class="uk-container uk-container-expand uk-background-primary">
<nav class="uk-navbar uk-light" data-uk-navbar="mode:click">
<div class="uk-navbar-left">
<a class="uk-navbar-item uk-logo" href="http://127.0.0.1:8000">Title</a>
</div>
<div class="uk-navbar-right">
<div>
<a class="uk-navbar-toggle" uk-search-icon href="#"></a>
<div class="uk-drop" uk-drop="mode: click; pos: left-center; offset: 0">
<form class="uk-search uk-search-navbar uk-width-1-1">
<input class="uk-search-input" type="search" placeholder="Search..." autofocus>
</form>
</div>
</div>
<ul class="uk-navbar-nav">
</ul>
</div>
<form id="logout-form" action="http://127.0.0.1:8000/logout" method="POST"
style="display: none;">
<input type="hidden" name="_token" value="MUWWzNyxBfdhwOkDs7yKfBu8aBTmemlTEidTDN7c">
</form>
</nav>
</div>
</header>
<aside id="left-col" class="uk-light uk-visible@m">
<div class="profile-bar">
<div class="uk-grid uk-grid-small uk-flex uk-flex-middle" data-uk-grid>
<div class="uk-width-auto">
</div>
<div class="uk-width-expand">
<span class="uk-text-small uk-text-muted">Welcome</span>
<h4 class="uk-margin-remove-vertical text-light"> Guest</h4>
</div>
</div>
</div>
<div class="bar-content uk-position-relative">
<ul class="uk-nav-default uk-nav-parent-icon" data-uk-nav>
<li class="uk-nav-header">MAIN SECTIONS</li>
<li class="uk-parent uk-open">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">SECONDARY</li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">LIST OF PAGES</li>
<li><a href="album.html"><span class="uk-margin-small-right"
data-uk-icon="icon: image"></span> Album</a></li>
<li><a href="article.html"><span class="uk-margin-small-right"
data-uk-icon="icon: info"></span> Article</a>
</li>
<li class="uk-nav-divider"></li>
<li><a href="login.html"><span class="uk-margin-small-right"
data-uk-icon="icon: sign-in"></span> Login</a>
</li>
<li><a href="login-dark.html"><span class="uk-margin-small-right"
data-uk-icon="icon: sign-in"></span> Login-Dark</a></li>
</ul>
</div>
<div class="uk-position-bottom bar-bottom">
<ul class="uk-subnav uk-flex uk-flex-center uk-child-width-1-6" data-uk-grid>
<li>
<a href="#" class="uk-icon-link" data-uk-icon="icon: home"></a>
</li>
<li>
<a href="#" class="uk-icon-link" data-uk-icon="icon: settings"></a>
</li>
<li>
<a href="#" class="uk-icon-link" data-uk-icon="icon: social"></a>
</li>
<li>
<a href="#" class="uk-icon-link" data-uk-icon="icon: comment"></a>
</li>
<li>
<a href="#" class="uk-icon-link" data-uk-tooltip="Sign out" data-uk-icon="icon: sign-out"></a>
</li>
</ul>
</div>
</aside>
<div id="content" data-uk-height-viewport="expand: true">
<div class="uk-container uk-margin uk-flex uk-flex-center">
<div class="uk-card uk-card-default uk-width-1-2@s">
<div class="uk-card-header">
<h3 class="uk-card-title uk-margin-remove">Registrieren</h3>
</div>
<form class="uk-form-stacked" method="POST" action="http://127.0.0.1:8000/register" novalidate>
<input type="hidden" name="_token" value="MUWWzNyxBfdhwOkDs7yKfBu8aBTmemlTEidTDN7c">
<script src="https://www.google.com/recaptcha/api.js?" async defer></script>
<div class="uk-card-body">
<div class="uk-margin">
<label class="uk-form-label ">
Name
</label>
<div class="uk-width-1-1 uk-inline">
<span class="uk-form-icon "
uk-icon="icon: user">
</span>
<input id="name" type="name"
class="uk-input "
name="name" value="" required autofocus>
</div>
</div>
<div class="uk-margin">
<label class="uk-form-label ">
E-Mail Addresse
</label>
<div class="uk-width-1-1 uk-inline">
<span class="uk-form-icon "
uk-icon="icon: user">
</span>
<input id="email" type="email"
class="uk-input "
name="email" value="" required>
</div>
</div>
<div class="uk-margin">
<label class="uk-form-label ">
Passwort
</label>
<div class="uk-width-1-1 uk-inline">
<span class="uk-form-icon "
uk-icon="icon: lock">
</span>
<input id="password" type="password"
class="uk-input "
name="password" required>
</div>
</div>
<div class="uk-margin">
<label class="uk-form-label">
Passwort erneut eingeben
</label>
<div class="uk-width-1-1 uk-inline">
<span class="uk-form-icon" uk-icon="icon: lock">
</span>
<input id="password" type="password" class="uk-input" name="password_confirmation"
required>
</div>
</div>
<div data-sitekey="6LdEz2oUAAAAAOHdDB2RNsYlKl2k5Oif71QEwvWu" class="g-recaptcha"></div>
</div>
<div class="uk-card-footer uk-clearfix">
<button type="submit" class="uk-button uk-button-primary uk-box-shadow-medium">
Registrieren
</button>
</div>
</form>
</div>
</div>
<footer class="uk-section uk-section-small uk-text-center">
<hr>
<a href="https://github.com/zzseba78/Kick-Off">Created by KickOff</a> | Built with <a
href="http://getuikit.com" title="Visit UIkit 3 site" target="_blank" data-uk-tooltip><span
data-uk-icon="uikit"></span></a>
</footer>
</div>
<!-- OFFCANVAS -->
<div id="offcanvas-nav" data-uk-offcanvas="flip: true; overlay: true">
<div class="uk-offcanvas-bar uk-offcanvas-bar-animation uk-offcanvas-slide">
<button class="uk-offcanvas-close uk-close uk-icon" type="button" data-uk-close></button>
<ul class="uk-nav uk-nav-default">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#js-options"><span class="uk-margin-small-right uk-icon"
data-uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-small-right uk-icon"
data-uk-icon="icon: thumbnails"></span> Item</a>
</li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-small-right uk-icon" data-uk-icon="icon: trash"></span> Item</a>
</li>
</ul>
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
<script src="http://127.0.0.1:8000/js/app.js"></script>
</body>
</html>
Any idea how to solve that?
Level 5
Hi @MaverickChan and thank you for your reply.
Unfortunately I don't get what you meant: Page not found? No, the page can be found ;) There is no 404 :)
I am using Laravel with Vue - but there is custom css and JS.
I am using webpack.mix.js:
let mix = require("laravel-mix");
mix
.js("resources/assets/js/app.js", "public/js")
.sass("resources/assets/sass/custom.scss", "public/css")
.sass("resources/assets/sass/app.scss", "public/css");
The error message I posted is the complete error message (except the last line):
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.
Found in <Root>
Well - and after the last line the whole HTML source is being shown.
So - thanks for your answer; I'm sure I just did not get what you mean :-)
Cheers, Roman
Level 56
The problem is that you are adding this script tag:
<script src="https://www.google.com/recaptcha/api.js?" async defer></script>
Inside the Vue root element (<div id="app">...</div>)
Vue disallows script tags inside the Vue managed elements
Move it outside the Vue's root element.
Try placing it just before your app script tag on the bottom of your file:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ... -->
</head>
<body>
<div id="app">
<!-- ... your vue app / no script tag allowed here ... -->
</div>
<script src="https://www.google.com/recaptcha/api.js?" async defer></script>
<script src="http://127.0.0.1:8000/js/app.js"></script>
</body>
</html>
Or just after the body tag but before your app's root element:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ... -->
</head>
<body>
<script src="https://www.google.com/recaptcha/api.js?" async defer></script>
<div id="app">
<!-- ... your vue app / no script tag allowed here ... -->
</div>
<script src="http://127.0.0.1:8000/js/app.js"></script>
</body>
</html>
6 likes
Level 1
@rodrigo.pedra thanks a lot for your help
1 like
Level 47
it is 404 , because you add an additional coma at the end of the link. You can click to test.
Level 5
Ah, I thought you meant an 404 would cause the error in my app :D Alright, thanks. I'll edit that.
Level 1
Hello! I'm having the same problem, but I'm using a base app/template
like this:
@include('inc.navbar')
<div class="container p-3">
@include('inc.messages')
@yield('content')
</div>
</div>
the error shows in the content section that is inside of the div id=app, how can i insert a javascript chart inside the content section from the page that renders the content?
Please or to participate in this conversation.