When I tried to include the stripe dependency only for the template where I need it (in laravel blade):
#push ('head_scripts')
<script src="https://js.stripe.com/v3/"></script>
#endpush
..I got the error 'ReferenceError: Stripe is not defined'. So I included it in my main "head" partial, so it was included everywhere. Then I ran into the same error when going into the admin section, because it's not included in that template.
But does it really need to be included everywhere?
It is only used in one vue component like this:
<script>
let stripe = Stripe(`pk_test_zzzzzzzzzzzzzzz`);
let elements = stripe.elements();
let card = undefined;
This component seems to be evaluated even when it isn't rendered. Can I get around this issue in some way?
I was having this problem in a Vue app not using Laravel.
But to fix it i put the script <script src="https://js.stripe.com/v3/"></script> in my index.html
Then when referencing Stripe in a component i used window.Stripe That pointed to the script and fixed the ReferenceError: Stripe is not defined error.
Putting script in my index.html worked, but gave me performance issues when I published because it loads the script on every single page, instead of just where it's needed.
So instead I used import {loadStripe} from '#stripe/stripe-js/pure';. It delays loading Stripe until loadStripe is called.
This article helped me use the import:
Importing Stripe.js as an ES Module into Vue
Related
I'm trying to use pdf.js in a single page application made with vueJs and the composition API.
I've installed pdfjs-dist and pdfJs (I don't know what the difference is ) but I can't find the propoer way to import it to my components to use it.
Can someone tell me how to do it?
i tried this:
<script setup>
import pdfjsLib from "pdfjs-dist/build/pdf";
</script>
but it doesn't work. I get this error: You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
I've also tried including pdfjs through a cdn with a script tag in the index.html... but then, It doesn't work. I try to follow a tutorial, but it doesn't work. I just get errors: numPages is not a function.
Can someone help me oout please?
I am using a Vue plugin component Timeago, and i want to show a timeago time in the content of a map plugin. A super-simplified example to illustrate the usage would be something like:
let popup = L.responsivePopup().setContent(`
<h1>Hello world</h1>
<p>A thing happened <Timeago datetime="${datetime}"></Timeago></p>
`);
L.marker([lat, lon]).bindPopup(popup).addTo(this.map);
According to this answer, and Vue's documentation, i should be able to compile this using Vue.compile(), but i am not understanding the concept.
First, there is no explanation on what a "full build" is. How can i tell if what i have is a "full build"? Searching for "vuejs full build" doesn't return anything that is being referred to as literally that phrase, even though they use it in the documentation there. All i know is that when i try to call Vue.compile() with having imported import Vue from 'vue', it complains saying:
TypeError: vue__WEBPACK_IMPORTED_MODULE_6__.default.compile is not a function
So i don't know where to go from there.
And then second thing is (assuming the first thing gets sorted), will i have to make my HTML hold an empty div with a specific id, wait for it to render, and then call the Vue.compile() on it, since the sample code there runs with .mount() on an element id? Because that seems a little "incorrect", having seemingly an extra step. Or is that the only way to make this scenario work?
If there is an alternative simpler wait of making this work, like getting the Timeago component to just return the rendered string only, such as 2 hours ago that i can incorporate into my string literal, that would work for me as well. Either way is fine.
Vue has differents build of it's package, full means that package can compile templates and and run it. All build types can be found here https://v2.vuejs.org/v2/guide/installation.html#Explanation-of-Different-Builds
Vue.compile allows you to use render functions, which allow you to manipulate DOM and create elements in a programmatic way. Here you can find Vue documentation about it https://v2.vuejs.org/v2/guide/render-function.html
About the issue you are facing, you can create a vue component and put that popup inside it, this component when render will render the timeago component.
<template>
<h1>Hello world</h1>
<p>A thing happened <Timeago datetime="${datetime}"></Timeago></p>
</template>
import Timego from './Timeago.vue'
export default {
components: {
Timeago
},
props: {
datetime: String
}
}
I have some web components created using stenciljs. When I include them in the html from the beginng everything work fine, see example
<codext-gradient-button color="darkblue" class="hydrated">Gradient
Button - Darkblue</codext-gradient-button>
<script type="text/javascript" src="https://unpkg.com/#codext/stencil-
components#0.0.6/dist/gradient-button.js"></script>
https://jsfiddle.net/vqe7wchb/1/.
But when I add dynamically the component the operation fails, see example
<script>
let script = document.createElement('script');
script.src = "https://unpkg.com/#codext/stencil- components#0.0.6/dist/gradient-button.js";
document.head.appendChild(script);
</script>
<codext-gradient-button color="darkblue" class="hydrated">Gradient Button
- Darkblue</codext-gradient-button>
https://jsfiddle.net/vqe7wchb/2/.
I did open a bug in the stenciljs project on github, you may find there more details https://github.com/ionic-team/stencil/issues/1429.
This is an issue for the es5 bundle loader for older web browsers. In case anyone is having trouble with this make sure you dynamically append the script as the last item on the page, otherwise it will fail to lazy load additional scripts.
I posted the issue on the stencil github: https://github.com/ionic-team/stencil/issues/1981
This might be a bit of an odd question, but I'll try to explain.
I'm looking to build a vue based video player widget for a client's Drupal website. The idea is to create something he can just drop in, like a JQuery plugin. However, I'd really like to leverage Vue's Single File Components (with Webpack) so I can keep everything all bundled together.
My first thought would be to use the Vue CLI, npm build and then reach into the dist/ folder and pull out the following to drop in:
<link href=/static/css/app.cf6f127cf50f4c0b2424d30fdc56c3a4.css rel=stylesheet>
<div id="my-widget"></div>
<script type=text/javascript src=/static/js/manifest.e12c1c4a9566f686d69f.js></script>
<script type=text/javascript src=/static/js/vendor.47037dd92c40b3f38949.js></script>
<script type=text/javascript src=/static/js/app.3f1bab5cc5b1be1127b2.js></script>
Although this feels off, is there a better way to achieve this? Keep in mind his website is NOT a Vue app, but I want this widget to be built LIKE a Vue app.
I don't know if I understand 100 percent, as far as I know, it is possible. It doesn't matter how you bundle your app. It is a matter of architecture. You can use vue.js partly, like widget.
First when you set Vue instance, just set element with your target element.
new Vue({
el: '#my-widget'
});
If you want your client to set element himself, make some functions to create vue widget. (considering multiple vue instance or state sharing blah blah...)
// you can provide simple function like this (I'm sure it needs to be more.)
const Widget = {
createWidget(el) {
new Vue({
el: el
});
}
};
// on client side
Widget.createWidget('#his-widget');
On bundling, if you want your widget to be bundled together with client's Drupal website. Let him import your widget like other libraries. You can build your widget with npm run build in vue-cli and then give it to him so that he can include it.
Thanks to #yuriy636 for answering my question. The CLI 3.0 allows to build as a library or a web component. docs
Also I found the following article which goes into more depth
https://vuejsdevelopers.com/2018/05/21/vue-js-web-component/
I am getting an error message as element.dispatchEvent is not a function. I am using jQuery with prototype in rails 3 application. In my layout file, I have added the js files as below
javascript_include_tag 'jquery','jquery_ujs','prototype','shadowbox/shadowbox.js'
<script type="text/javascript">jQuery.noConflict();</script>
I have also added jQuery.noConflict as above and used jQuery instead of $ in jQuery functions. Any idea how to resolve this.?
In my another controller page action I have also mentioned the same thing as there are some js files which needs to be reloaded only for that particular page.
I am a newbie in js as well as rails also.
you should use jQuery.noConflict right after src to the jQuery library
Using jQuery.noConflict(); should be enough. Please check the code of the page in your browser so you can see when prototype is actually added.
You should have jQuery, then the .noConflict call, then prototype.
Besides adding the 'no conflict' method, I do this instead (though both would probably be best):
I'll 'preset' my custom script page. Let's say my prediction is that I will use maybe 5 blocks of code in a page - this is how I preset my page:
jQuery(document).ready(function($) {
// use $ in here like normal!
});
jQuery(document).ready(function($) {
});
jQuery(document).ready(function($) {
});
jQuery(document).ready(function($) {
});
etc. etc.
Notice this uses the jQuery object itself to pass as the callback function to the .ready method so you can once again use the $ identifier within the functions. I can rename it so their will never be a conflict, and I can use the $ identifier within the function like I normally would. Hope that helps.