I am learning Vue.js and would like to implement the bulma-calendar module in my app. I came this far, but the calendar is somehow not updating, when I am selecting a new Date.
Sorry if I can't specify the problem more, as I said declarative programming is very new to me.
The template I got from the official website of bulma-calendar: https://demo.creativebulma.net/components/calendar/v6//#integration
Vue.component("comp-calendar", {
template: `
<div>
<input ref="calendarTrigger" type="date">
</div>
`,
data: function () {
return {
date: new Date(),
};
},
mounted: function () {
const options = {
type: "date",
color: "danger",
dateFormat: "DD-MM-YYYY",
startDate: this.date,
displayMode: "inline",
};
const calendar = bulmaCalendar.attach(
this.$refs.calendarTrigger,
options
)[0];
calendar.on("date:selected", (e) => (this.date = e.date));
},
});
var app = new Vue({
el: "#app",
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- import bulma -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.1/css/bulma.min.css">
<!-- import bulma-calendar -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-calendar#6.0.9/dist/css/bulma-calendar.min.css">
</head>
<body>
<div id="app">
<comp-calendar></comp-calendar>
</div>
<!-- import bulma-calendar -->
<script src="https://cdn.jsdelivr.net/npm/bulma-calendar#6.0.9/dist/js/bulma-calendar.min.js"></script>
<!-- import https://vuejs.org -->
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.12/dist/vue.js"></script>
<script src="src/js/test.js"></script>
</body>
Any help? Thanks
EDIT: Did not help:
[...]
<input type="date">
[...]
const calendar = bulmaCalendar.attach('[type="date"]', options)[0];
calendar.on("select", (e) => (this.date = e.date))
Probably a bug in 6.0.9. Working with 6.0.0 (according to documentation here: https://creativebulma.net/product/calendar/demo) worked fine.
calendar.on("select", (e) => (this.date = e.date))
here this.date is incorect. this "this" is calendar object not the vue object
Related
I am trying to build a quasar app as a web component, for which I am planning to use vue custom element.
I did the following changes,
import { boot } from 'quasar/wrappers';
import { defineCustomElement } from 'vue';
//#ts-ignore
import vueCustomElement from 'vue-custom-element';
import * as BaseApp from './../App.vue';
import { App } from "vue";
let custElement: any;
export default boot(({app,router,store}) => {
custElement = vueCustomElement;
//#ts-ignore
BaseApp.default.store = store;
//#ts-ignore
BaseApp.default.router = router;
const CustomElement = defineCustomElement({props:BaseApp.default.props,setup:BaseApp.default.setup,name:BaseApp.default.name,store:BaseApp.default.store,router:BaseApp.default.router})
customElements.define('test-app', CustomElement)
});
export { custElement };
Did the following changes in quasar.conf.js file to disable chunking
chainWebpack: (config) => {
config.resolve.symlinks(false);
config.optimization.splitChunks(false);
config.output.filename('js/app.js');
},
filenameHashing: false,
pluginOptions: {
webpackBundleAnalyzer: {
openAnalyzer: false,
},
},
configureWebpack: {
output: {
libraryExport: 'default',
},
devServer: {
disableHostCheck: true,
},
},
extendWebpack(cfg) {
cfg.plugins.push(
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1,
})
);
const vueLoaderRule = cfg.module.rules
.find(el => el.test.toString() == /\.vue$/.toString())
const ruleFirstLoader = vueLoaderRule.use[0]
const options = ruleFirstLoader.options
// change options
options.transpileOptions = {
transforms: {
dangerousTaggedTemplateString: true
}
}
},
Added the custom element in the index.template.html file
<!DOCTYPE html>
<html>
<head>
<title><%= productName %></title>
<meta charset="utf-8">
<meta name="description" content="<%= productDescription %>">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
<link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png">
<link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
<link rel="icon" type="image/ico" href="favicon.ico">
</head>
<body>
<!-- DO NOT touch the following DIV -->
<!-- <div id="q-app"></div> -->
<test-app id="q-app"></test-app>
</body>
</html>
When running the app, the rendered html content will look like the below,
Rendered Vue Custom Element
I am not sure where the issue is. It would be grateful if I got any suggestions to solve this issue.
Thanks in advance for your help.
I'm trying to use jsPDF with Vue but I get a ReferenceError: jsPDF is not defined. See the snippet :
let jsPrint = () => {
const doc = new jsPDF()
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<button onclick="jsPrint()">
print
</button>
The script is linked in the head tag :
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= $site->title() ?> - <?= $page->title() ?></title>
<link rel="stylesheet" href="<?= url('assets') ?>/css/style.css">
<!--========== JSPDF ==========-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<!--========== VUE ==========-->
<!-- development version, includes helpful console warnings -->
<script src="<?= url('assets') ?>/js/libs/vue.js"></script>
<script src="<?= url('assets') ?>/js/app.js" type="module" defer></script>
</head>
Then in a component, I have a method that should be triggered on click on a button :
exportSimple: function() {
const doc = new jsPDF()
// const target = document.querySelector('#dialog-export-content')
// doc.html(target, {
// callback: function(doc) {
// doc.save()
// },
// x: 10,
// y: 10
// })
}
But i throws an error.
I tried alternative methods to link the library : local, npm, other sources like jspdf.es.min.js. Nothing works.
Any idea ?
Using CDN the jsPDF object is available as property of jspdf which is available globally :
const { jsPDF } = jspdf
let print = () => {
const doc = new jsPDF()
}
I'm trying to create a new project but I'm getting this error and I don't know why. I'm using Laravel 8, Vue and Inertia.js.
I'm not sure if these files are important but I'll add anyways
webpack.mix.js
const mix = require('laravel-mix');
const path = require('path');
mix.js('resources/js/app.js', 'public/js').vue({ version: 2 })
.sass('resources/sass/app.scss', 'public/css')
.webpackConfig({
output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
resolve: {
alias: {
vue$: 'vue/dist/vue.runtime.esm.js',
'#': path.resolve('resources/js'),
},
},
})
.babelConfig({
plugins: ['#babel/plugin-syntax-dynamic-import'],
})
.version();
app.js
import InertiaApp from '#inertiajs/inertia-vue'
import Vue from 'vue'
Vue.use(InertiaApp);
const app = document.getElementById('app');
app.setAttribute(':class',"{'loaded': loaded}");
new Vue({
render: h => h(InertiaApp, {
props: {
initialPage: JSON.parse(app.dataset.page),
resolveComponent: name => import(`#/Pages/${name}`).then(module => module.default),
},
data(){
return{
loaded:true
}
}
}),
}).$mount(app);
app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
#inertia
</body>
</html>
Finally the page I'm trying to show Login.vue
<template>
<div>
<h1>Login</h1>
</div>
</template>
<script>
export default {
data() {
return {}
},
mounted() {
console.log('mounted');
}
}
</script>
I don't know why this is happening or how to fix it.
What am I doing wrong?
I am trying to use Quill editor with dojo framework, but its not working. The editor is not shown over there. Any help in this regard will be highly appreciated.
<html>
<head>
<link rel="stylesheet" href="http://cdn.quilljs.com/0.16.0/quill.snow.css" />
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/dojo/1.7.0/dojo/dojo.js"
data-dojo-config="async: true, packages: [
{ name: 'quill', location: 'http://cdn.quilljs.com/0.16.0/', main: 'quill' }
]" />
</head>
<body>
<div id="editor">
Editor in chief!
</div>
<script type="text/javascript">
define.amd.quill = true;
require(["quill"], function(quill){
var editor = new Quill("#editor");
});
</script>
</body>
I'm not familiar with Dojo 1.7, so opted for 1.10.4.
I also had XSS errors (something about an iframe) with Quill version 0.16, so went with the latest 1.2.6 version.
The below seems to work fine.
require(["dojo/ready", "Quill"], function(ready, Quill){
ready(function(){
var editor = new Quill("#editor", { theme: 'snow' })
})
})
<script>
var dojoConfig = {
async: true,
packages: [{ name: 'Quill', location: '//cdn.quilljs.com/1.2.6', main: 'quill' }]
}
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="//cdn.quilljs.com/1.2.6/quill.snow.css" rel="stylesheet" />
<div id="editor">Editor in chief!</div>
Can you please take a look at this code and let me why I am not able to add a Package dbootstrap into the dojo toolkit?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head>
<body class='dbootstrap'>
<div class="jumbotron">
<h1 id="greeting">app</h1>
</div>
<!-- load Dojo -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script>
var dojoConfig = {
packages: [
{
location: '/dbootstrap',
name: 'dbootstrap'
}
]
};
require([
'dbootstrap',
'dojo/dom',
'dojo/dom-construct'
], function(dbootstrap, dom, domConstruct) {
var greetingNode = dom.byId('greeting');
domConstruct.place('<i> Test!</i>', greetingNode);
});
</script>
</body>
</html>
As you can see in this image I already added the dbootstrap folder into the root directory
but I am getting these errors:
The dojoConfig need to be declared before including dojo.js, so, this should work for you
<script type="text/javascript">
var dojoConfig = {
packages: [
{
location: '/dbootstrap',
name: 'dbootstrap'
}
]
};
</script>
<!-- load Dojo -->
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script type="text/javascript">
require([
'dbootstrap',
'dojo/dom',
'dojo/dom-construct'
], function(dbootstrap, dom, domConstruct) {
var greetingNode = dom.byId('nodeId');
domConstruct.place('<i> Test!</i>', greetingNode);
});
</script>