As the title says it all, I will still guide you to reproduce the issue. Details are below.
Steps to reproduce
Clone Laravel official project from Github
Install all dependencies of Php and JavaScript (Node)
npm install - for node
composer install - for php
After installing all dependencies
Open up resources/views/welcome.blade.php and edit it to the following code below
<!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>Mix</title>
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
<div id="app">
<h1>Hello, world!</h1>
<example-component />
<camel-case-component />
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
Open up resources/js/app.js and edit it to the following code below
require('./bootstrap');
window.Vue = require('vue');
Vue.component('camel-case-component', require('./components/CamelCaseComponent.vue').default);
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app'
});
Note: Do not forget to add the file resources/js/components/CamelCaseComponent.vue
Run the laravel mix, npm run dev
Serve your app, php artisan serve and open it using any browser http://127.0.0.1:8000/
That's it. Minimal modification only.
Try this
<example-component></example-component>
<camel-case-component></camel-case-component>
Instead of
<example-component />
<camel-case-component />
I used closing tags for each component instead of self-closing tag.
HTML
So the problem is that HTML does not allow custom elements to be self-closing. Only "official void" elements can use self-closing; <link href="style.css" /> for example.
Because blade templates need to be valid HTML you should change it to
<example-component></example-component>
<camel-case-component></camel-case-component>
Vue Templates
Vue templates are parsed, so they don't need to adhere to the official HTML syntax. Vue actually recommends to use self-closing tags in other Vue components.
So having
<example-component />
<camel-case-component />
In a Vue template would be totally fine.
For more details about this you can check out the official Vue documentation
Related
So basically my problem is, how to wrap vue components to laravel app. Its quite big website build on laravel blade templating. My question is, if i should wrap whole website in a single app element, and then add components in a way similar to this:
<html lang="{{ config('app.locale') }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css/app.css">
<title>#yield('title')</title>
<title>#yield('description')</title>
</head>
<body>
<div class="vue-app-wrapper" id="app">
<div class="container">
<some-vue-component1></some-vue-component1>
</div>
<div class="content-wrapper">
#yield('content')
</div>
<footer style="margin-top: 30px;">
<!-- some footer stuff -->
</footer>
</div>
<script src="js/app.js" charset="utf-8"></script>
#stack('scripts')
</body>
</html>
And just include another components in other sections.
Or maybe i should build multiple vue apps, wrap smaller elements and push required js files through laravel blade #stack and #push. I would like to know advantages and disadvantages of both soultions, also i wonder if VUE is suited for what i will use JS for. Main purpose of vue scripts are some dynamic ajax calls like "add to favourites", "rate item" etc. Alsto some carouseles, searcher and creating localStorage data. Maybe i should use vanilajs/jquery?
I have an existing working app in Laravel, the client wants to add another features, but this time he wanted to use Angular2 instead of the previous jQuery.
I created new folder inside resources folder using angular-cli tools. The example angular app that created tru angular-cli works fine when running ng serve, that would point to //localhost:3000/ . But I need the default angular base to something like this
myproject.dev/angular
myproject.dev contains the homepage for the Laravel project, so my user module with angular should be in
myproject.dev/angular //dev
www.myproject.com/angular //production
Running
ng build --bh /angular/
Would be successful in
localhost:4200/angular
But would display 404 in
myproject.dev/angular
I created a route
Route::get('/angular/', function () {
return view('welcome');
});
The welcome.blade.php is the
resources/views/welcome.blade.php
I just copy paste the default index.html inside the angular app to the welcome.blade.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Angular 2</title>
<base href="/angular/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
Any idea how to make this work?
I am trying to use summernote in my web app, after i followed the steps provided here http://summernote.org/getting-started/#installation
When i test in browser, it only shows the resize handle at the bottom of the editor, toolbars are not loaded at all. I dont know if there is anything outside the steps provided by the sunnernote instructions. Pls help me out cos am stock here, i dont want to use another editor. Thanks for stopping by..
Thanks for reporting. Could you try below link again?
http://summernote.org/getting-started/#installation
Actually I'm creator of summernote. I updated library path with protocol.
If It's still not working, save below contents with index.html and open it with browser again.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!-- include libraries(jQuery, bootstrap, fontawesome) -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<!-- include summernote css/js-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.7.0/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.7.0/summernote.js"></script>
</head>
<body>
<div id="summernote">Hello Summernote</div>
<script>
$(document).ready(function() {
$('#summernote').summernote();
});
</script>
</body>
</html>
PROBLEM SOLVED
I had the bootstrap.js refrenced before jquery.min.js,
all i did was to reference jquery before any other .js file
enter link description here
It helped me but it will help you too
<div class="container pt-2">
<div id="makeMeSummernote">
</div>
<div class="mt-2 text-center">
<button id="btnToggleStyle" class="btn btn-primary">Toggle Corrected Styles</button></div>
Could you please help me to detect and fix same bug in the simple Click Counter application.
I generated the Click Counter application from Dart Editor (New project -> simple web application using polymer library..)
Now I want to add Social Likes functionality (see http://sapegin.github.io/social-likes/.)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample app</title>
<!-- include the web_components polyfills with support for Dart. -->
<script src="packages/web_components/platform.js"></script>
<script src="packages/web_components/dart_support.js"></script>
<!-- import the click-counter -->
<link rel="import" href="clickcounter.html">
<link rel="stylesheet" href="cc.css">
<link rel="stylesheet" type="text/css" href="social-likes_birman.css" />
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="social-likes.min.js"></script>
</head>
<body>
<h1>Cc</h1>
<p>Hello world from Dart!</p>
<div id="sample_container_id">
<click-counter count="5"></click-counter>
</div>
<div class="social-likes">
<div class="facebook">Facebook</div>
<div class="twitter">Twitter</div>
<div class="plusone">Google+</div>
</div>
<!-- bootstrap polymer -->
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
This code works perfect in Dartium and Chrome, but doesn't work in Firefox (the styles of Social Likes is not applied! The web console of FireFox doesn't contain any error..
Dart Editor version 1.7.0.dev_04_06 (DEV)
Dart SDK version 1.7.0-dev.4.6
Firefox 33
The code of application is attached to this issue.
I really don't understand what is wrong. Is there a bug in FireFox or polymer or dart2js? This bug is very critical for me...
I am learning about how to use Jekyll and Github recently and I am having a hard time getting my website to display correctly online but it does display correctly locally when I run:
jekyll serve --baseurl ''
My Github repo that I am working on is http://yungkickz.github.io/kingwizard
Github Tree
Any help or hints would be super helpful.
Edit: Basically this entire website is missing the correct CSS and links are pointing to the wrong place; especially the first Home and About link as any the other links were made to just test.
My config.yml:
name: kingwizard
description: wizardly blog
paginate: 5
url: "http://yungkickz.github.io"
baseurl: /kingwizard
markdown: rdiscount
Also here I've added the beginning of the html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="{{ site.description }}">
<meta name="author" content="">
<title>{{ site.name }}</title>
<!-- Bootstrap core CSS -->
<link href="{{ site.baseurl }}/css/bootstrap.css" rel="stylesheet">
<!-- Custom Arreis Style -->
<link href="{{ site.baseurl }}/css/custom-style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="{{ site.baseurl}}js/html5shiv.js"></script>
<script src="{{ site.baseurl}}js/respond.min.js"></script>
<![endif]-->
</head>
Judging from the source code of your site, I have noticed some issues:
Many of your references to HTML, CSS, and JavaScript files begin with //. It seems like site.baseurl is set to / on GitHub for some reason, despite the setting in your config file. However, you often add addition slashes after site.baseurl in paths, which causes the second slash to appear.
Because site.baseurl is /, browers will expect to find your files at http://yungkickz.github.io/SOME_PATH. However, your site is actually deployed to http://yungkickz.github.io/kingwizard, so your links should be pointing to http://yungkickz.github.io/kingwizard/SOME_PATH instead.
Because of the 404 errors, your CSS styles are not loaded, which is why your site looks like it isn't formatted correctly.
Before:
<link href="{{ site.baseurl }}/css/bootstrap.css" rel="stylesheet">
After:
<link href="/kingwizard/css/bootstrap.css" rel="stylesheet">