Using Vue js component without webpack - javascript

Trying to migrate from jQuery web page to VueJs.
I thought wholly rebuild web page to vue-cli based template code might be difficult.
So 1st Step to migrate jQuery to vuejs without webpack. It means all page keep individual pages not SPA. So every single page include vue.js with <script> tag.
I stuck with jQuery slider.
Original code seems like $( ".slider" ).slider({....
Converting jQuery's slider to vue-slider-component was stuck, cause I don't know how can make static js from vue components.
My expectation is at below.
<head>
<script src="https://unpkg.com/vue"></script>
<script src="vue-slide.js"></script> <-- like this
</head>
<body>
<vue-slider v-ref:slider :value.sync="value"></vue-slider>
...
<script>
new Vue({ ...
</script>
</body>
Is stupid idea?
What is the best practice for converting jQuery to vuejs without heavy cost?

Until now, I often use inline vuejs. I think that is the good option to migration from legacy code to full SPA.
For example, below code is what I used for migration.
<head>
<script src="lib/vue.min.js"></script>
<script src="lib/bootstrap-vue.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#slider').nivoSlider({
pauseTime: 3000
});
});
</script>
</head>
<body>
<div id="app">
<div v-cloak>
<div id="header">
<div class="nav" style="display: block;">
...
</div>
<script language="javascript" type="text/javascript">
Vue.component('room', {
...
})
const app = new Vue({
el: "#app",
component: [
'room'
],
...
</script>
</body>
</html>
...

Related

Why does code's structure is so different with each CDN in VueJS?

I am so confusing about Vue's structure. First time, I learnt from a video by freeCodeCamp channel on YouTube.
After that, I found a book to learn
Getting to Know Vue.js Learn to Build Single Page Applications in Vue from Scratch
by Brett Nelson
The problem I faced was that when I follow the tutorial on YouTube, I used unpkg to run and it worked but with the book, they use
jsdelivr and when I used the same code with the code I used for unpkg, it didn’t work.
I have no idea about what I should learn because 2 tutorials from 2 sources I used were totally different.
Code I use for unpkg
<!DOCTYPE html>
<html>
<head>
<title>Vue 3</title>
</head>
<body>
<div id="app">
{{ propertyName }}
</div>
<script src="https://unpkg.com/vue#3/dist/vue.global.js"></script>
<script>
let app=Vue.createApp({
data: function(){
return {
propertyName: 'Hello from Getting to Know Vue.js!'
}
}
})
app.mount('#app')
</script>
</body>
</html>
Code I use for jsdelivr (it works but doesn't work with the code in <script> tag above):
<!DOCTYPE html>
<html>
<head>
<title>Vue 3</title>
</head>
<body>
<div id="app">
{{ propertyName }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
propertyName: 'Hello from Getting to Know Vue.js!'
}
});
</script>
</body>
</html>
Both codes are doing the same thing at the end, it's a subtle change in syntax. Sorry if it's confusing but understand that it's actually the same thing at the end.
The jsdelivr CDN is also using Vue2, while the unpkg is using Vue3 hence the small differences in plugin them to the DOM.
I recommend the usage of SFC style anyway tho (with a build tool like Vite): https://vuejs.org/api/sfc-spec.html#sfc-syntax-specification!

Most simple and minimalistic way to run vue js single page app with Node. (No CDN)

I am trying to learn how vue works without any other libraries, unless those are a necessity. Is there a way to create a simple vue js app (the most barebones) without web pack or vue-cli? Since those packages are not yet clear to me.
So far though I can embed it in HTML; however, Node does not run HTML files only JavaScript files.
<html>
<head>
</head>
<body>
<div id="container">
<input type="text" id="container" placeholder="enter text" v-model="value">
<p>{{ value }}</p>
</div>
<script>
var Vue = require('vue');
new Vue({
el: '#container',
data: {
value: '',
},
});
</script>
</body>
</html>
Have a look at: https://v2.vuejs.org/v2/guide/installation.html
You just need to have vue.js in script only.
For example: add it to your head tag <script src="https://cdn.jsdelivr.net/npm/vue#2.5.21/dist/vue.js"></script>
If you do not want to use CDNs download the vue.js and put it in you web app.
There is a good explanation at https://v2.vuejs.org/v2/guide/installation.html#Explanation-of-Different-Builds which may help you more.
Also have a look at https://v2.vuejs.org/v2/examples/.

Vue is not defined

I am trying to build a demo app with Vue.js. What I am getting is an odd error that Vue is not defined.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue JS Intro</title>
</head>
<body>
<div id="demo">
<p>{{message}}</p>
<input v-model="message">
</div>
<script type="JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
<script>
var demo = new Vue({
el: '#demo',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
</html>
What did I miss here? This is not a CDN issue as I also downloaded the library from the official website, used it and got the same result
index.html:15 Uncaught ReferenceError: Vue is not defined
jsBin demo
You missed the order, first goes:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
and then:
<script>
var demo = new Vue({
el: '#demo',
data: {
message: 'Hello Vue.js!'
}
});
</script>
And type="JavaScript" should be type="text/javascript" (or rather nothing at all)
Sometimes the problem may be if you import that like this:
const Vue = window.vue;
this may overwrite the original Vue reference.
try to fix type="JavaScript" to type="text/javascript" in you vue.js srcipt tag, or just remove it.
Modern browsers will take script tag as javascript as default.
I needed to add the script below to index.html inside the HEAD tag.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
But in your case, since you don't have index.html, just add it to your HEAD tag instead.
So it's like:
<!doctype html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
...
</body>
</html>
I got this error but as undefined due to the way I included js files
Initailly i had
<script src="~/vue/blade-account-update-credit-card-vue.js" asp-append-version="true"></script>
<script src="~/lib/vue/vue_v2.5.16.js"></script>
in the end of my .cshtml page
GOT Error Vue not Defined
but later I changed it to
<script src="~/lib/vue/vue_v2.5.16.js"></script>
<script src="~/vue/blade-account-update-credit-card-vue.js" asp-append-version="true"></script>
and magically it worked. So i assume that vue js needs to be loaded on top of the .vue
I found two main problems with that implementation. First, when you import the vue.js script you use type="JavaScript" as content-type which is wrong. You should remove this type parameter because by default script tags have text/javascript as default content-type. Or, just replace the type parameter with the correct content-type which is type="text/javascript".
The second problem is that your script is embedded in the same HTML file means that it may be triggered first and probably the vue.js file was not loaded yet. You can fix this using a jQuery snippet $(function(){ /* ... */ }); or adding a javascript function as shown in this example:
// Verifies if the document is ready
function ready(f) {
/in/.test(document.readyState) ? setTimeout('ready(' + f + ')', 9) : f();
}
ready(function() {
var demo = new Vue({
el: '#demo',
data: {
message: 'Hello Vue.js!'
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<p>{{message}}</p>
<input v-model="message">
</div>
as extra information,
if you use VueJs version ^3.2.0 and up, the way you should write Vueis is different witch you have the app.js has this code:
import "./bootstrap";
import { createApp } from "vue";
const app = createApp({});
So you have to use app object instead of Vue as you see bellow
import VueCountdownTimer from "vuejs-countdown-timer";
app.use(VueCountdownTimer);
I shared this information because this error counted me.
just put text/javascript in your script tag which you use for cdn
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js" type="text/javascript"></script>
I had the same problem and for a strange reason, the js that contains the Vue, has a defer inside the script definition:
<script src="js/app.js" defer></script>
That caused the script loads asynchronously than the other js files.
After I remove the defer tag, the problem was solved.
For those who are facing this error in src/main.js file in vue,
just add :-
var Vue = require('vue')
Then, It will work fine.

Using Ember.js for Single Page Website (not really a web app)

I just want to try using Ember.js for a website I am doing (Disclaimer: I am a Java web developer, GWT).
So far what I have tried is to slap the whole body tag code into like this
<body>
<script type="text/x-handlebars">
<!-- The whole page -->
</script>
</body>
Now, I just want to take advantage of Ember.js stuff like components, models and validation for my website.
Here's a run down of the dependencies involved:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js" type="text/javascript"></script>
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Ember -->
<script src="js/libs/handlebars-v3.0.0.js"></script>
<script src="js/libs/ember-template-compiler-1.10.0.js"></script>
<script src="js/libs/ember-1.10.0.debug.js"></script>
<script src="js/app.js"></script>
app.js
App = Ember.Application.create();
App.Router.map(function() {
});
The thing is, when I put the body into a x-handlebars script the jQuery plugins (like bxslider, carousel, etc.) that used to work would not work with the stuff that was inside the script tag.
What could be wrong with my approach?
What is rendered in your <script type="text/x-handlebars">Script</script> is being rendered after your JQuery code has run. You can fix this by modifying using the didInsertElement event in your view or component to run any code that is needed to initialize the elements in the view that was rendered.
didInsertElement: function() {
this.$().DoStuff();
}
There are a number of other questions on StackOverflow - including, for instance, this one - addressing similar issues, so you should be able to adapt their approaches.

Backbone.js set up

I'm confused, cause I've been trying to find out how to set up a Backbone.js Project.
This is what I've got, I just need to include the scripts and then what? This is where I got lost, I'm pretty sure that simply opening the file I created wouldn't run the project, would it? And also I am following the video tutorial by Thomas Davis but the tutorial doesn't cover how to set up Backbone.js or how to run the project. I notice the difference in our url. What am I missing out? Also If you have some good material for starters like me. tnx!
Here's the code I'm using:
<div id="page">
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script>
var View = Backbone.View.extend({
el: '.page',
render: function (){
this.$el.html('Hello World');
}
});
var Router = Backbone.Router.extend({
routes: {
'' : 'home'
}
});
var view = new View();
var router = new Router();
router.on('route:home', function ()
{
view.render();
});
Backbone.history.start();
</script>
</body>
</html>
Setting Backbone
You should include the undescore.js, jquery.js and backbone.js in your html and then simply run the file just like normal web app.
If you are familiar with apache, put your app in web root and access like http://localhost/my_app/.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<script src="js/underscore.js"></script>
<script src="js/jquery.js"> </script>
<script src="js/backbone.js"></script>
</body>
</html>
Download underscorejs from here and put in js folder.
Download jquery here.
Download Backbone here.
And then place your backbone function in external JavaScript file and include it after backbone.js.
Fix
And there is something error with your code. You are defined your element using id but trying to access using class notation.
So replace,
var View = Backbone.View.extend({
el: '.page',
render: function (){
this.$el.html('Hello World');
}
});
with,
var View = Backbone.View.extend({
el: '#page',
render: function (){
this.$el.html('Hello World');
}
});
You have to use el: '#page'.
You should include dependencies before including backbone.js.
So replace,
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
With,
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>

Categories