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?
Related
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
I am using the CKEditor on my website to take input from users. When HTML code is copied from page and pasted into CKEditor, it is converted into the corresponding page. I mean When I insert this:
<html>
<head>
<title>Upload Image</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<form action="Upload02" method="post" enctype="multipart/form-data">
Image<input type="file" name="image" id="image" accept="image/jpg">
<input type="submit" value="submit">
</form>
</div>
</body>
</html>
It is converted into this:
I reported this issue to the CKEditor official website, but I got no help from them. I am using the CKEditor 4.5.8 full version. It is working properly in their demo, but not in the actual implementation. It is giving a problem only in copy-paste. In normal typing it's working properly. What can I do?
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 trying to get started with kendo ui core. I followed the instructions at
http://docs.telerik.com/kendo-ui/getting-started/introduction?utm_source=telerik&utm_medium=email&utm_campaign=kuicore1
which say to include a link to the file js/kendo.web.min.js but this file was not in the kendoui.core download.
I tried substituting js/kendo.web.min.js for js/kendo.core.min.js which was in the download but that doesn't work either.
I am also getting a javascript console error on a file I've not even called.
GET /telerik.kendoui.2014.1.416.core/js/jquery-1.9.1.js 404 (Not Found)
I tried including both a local copy of jquery-1.9.1.js and a link to google cdn which removed the 404 error but still the kendo ui components don't work.
Please help me get started, thanks
<!doctype html>
<html>
<head>
<title>Kendo UI Web</title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.core.min.js"></script>
</head>
<body>
<input id="datepicker" />
<script>
$(function() {
$("#datepicker").kendoDatePicker();
});
</script>
</body>
</html>
If you use Kendo UI Professional then you can use core and you have all the JavaScript needed in one single file (kendo.web.min.js) -except jQuery- but this includes a lot of code that you might not need. That's why Telerik also distributes the separate files making your life harder but your web more efficient.
You can use the following example and then you don't need to setup anything else. If you copy this to a file and open it in a browser it should work...
<!doctype html>
<html>
<head>
<title>Kendo UI Web</title>
<link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.1.416/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.ui.core.min.js"></script>
</head>
<body>
<input id="datepicker" />
<script>
$(function() {
$("#datepicker").kendoDatePicker();
});
</script>
</body>
</html>
But this is not efficient because you are loading all the widgets and you are bringing them from internet.
BUT if you want to use Kendo UI CORE the file that you need to include with all the widgets (included in this core) is NOT kendo.core.min.js but kendo.ui.core.min.js. So your code should be:
<!doctype html>
<html>
<head>
<title>Kendo UI Web</title>
<link href="./styles/kendo.common.min.css" rel="stylesheet" />
<link href="./styles/kendo.default.min.css" rel="stylesheet" />
<script src="./js/jquery.min.js"></script>
<script src="./js/kendo.ui.core.min.js"></script>
</head>
<body>
<input id="datepicker" />
<script>
$(function() {
$("#datepicker").kendoDatePicker();
});
</script>
</body>
</html>
BUT it seems that you want to deploy it in your server / computer instead of from internet. Then you need to copy to your system:
JavaScript:
js/jquery.min.js
js/kendo.ui.core.min.js
CSS:
styles/kendo.common.min.css
styles/kendo.default.min.css
plus files used by Default style:
styles/Default/editor.png
styles/Default/imagebrowser.png
styles/Default/indeterminate.gif
styles/Default/loading.gif
styles/Default/loading-image.gif
styles/Default/loading_2x.gif
styles/Default/slider-h.gif
styles/Default/slider-v.gif
styles/Default/sprite.png
styles/Default/sprite_2x.png
All this files are referenced by kendo.default.min.css and you will find them in the downloaded zip containing Kendo UI Core.