I am trying to create a PDF of Vue component which uses Bootstrap Vue for style. I've successfully created PDF using Puppeteer but the styles are missing. I have added style tags also and still it's not working.
await page.addStyleTag({ url: 'https://unpkg.com/bootstrap/dist/css/bootstrap.min.css' })
await page.addStyleTag({ url: 'https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.css' })
Can some one help?
Related
I am developing a laravel app using vue js where I am using vue router for navigation and I have put the external js files in index.blade.php but in my app the external JS files are not working with vue router when navigating between components or pages but when I refresh the component or page the external JS files are working fine.
I have tried to add external JS files in specific component with below method but no help
mounted() { let appscript = document.createElement("script"); appscript.setAttribute( "src", "/dist/js/app.js" ); document.head.appendChild(appscript); }
I'm trying to use MathJax with Vuejs.
It works fine when I just open a page or reload a page. However, it stops working when I do a $router.push method to redirect to another page. In which case the formula is not rendered with MathJax. I am using vue-plugin-load-script for injecting the MathJax library.
I installed vue-plugin-load-scrip:
npm install --save vue-plugin-load-scrip
Then I imported it in Main.js
import LoadScript from 'vue-plugin-load-script'
Vue.use(LoadScript)
And here is what I did in my created() of the page:
this.$loadScript("https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML")
.then(() => {
// get my data with Parse Server
that.text = object.get("text")
})
.catch(() => {
// alert for error
});
in the previous page I used this to push the new page:
this.$router.push({ name: 'quizPage', params: {quizId} })
I suppose this is possibly a racing problem of some sort but can't find a solution
Thanks very much for any help!
Josh
The problem is that MathJax renders on page load. Vue doesn't really work that way. Fortunately, a kind stranger took the time to create a vue plugin to support it.
Here's an example of how it works.
I'm new to Vue JS and I don't know how to use this component: https://antoniandre.github.io/vue-cal/.
I do not have Babel, webpack, or nothing else but a code editor.
How can I use this in my Vue app?
In the documentation says that if I want to add the component trough a tag just add the tags and then add:
// In your VueJS component.
export default {
components: { 'vue-cal': vuecal },
...
}
But I tried and console shows: Unexpected token default
I want to make a Facebook Instant game with Vue. But facebook just has a cdn for the js file.
<script src="https://connect.facebook.net/en_US/fbinstant.6.2.js"></script>
If I import the cdn in index file I still cannot use it in the components. Vue shows undefined error.
I tried to import it in index.js just after body tag and initialize it to a window variable.
But that does not seem to work too.
<script>
window.onload = function() {
window._FBInstant = FBInstant;
FBInstant.initializeAsync()
.then(function() {
// Start loading game assets here
FBInstant.startGameAsync().then(function() {
startGame();
});
});
}
</script>
you can store the FB instance on a data property in the created or any other hook
data: () => ({ FBInstance: null}),
created() {
this.FBInstance = window._FBInstant
}
and if you want to use it globally, you can do the same trick inside a mixin
Vue.mixin({
data: () => ({ FBInstance: null}),
created() {
this.FBInstance = window._FBInstant
}
})
Insert the Facebook Instant Game CDN script tag just after <body> tag.
Don't use cdn or direct <script> include for importing vuejs in your project.
Download the vuejs production version and save it in the project folder and compress (bundle) it along with other game files in the zip during the uploading in web hosting.
after fb cdn, include the <script src="js/vue.js"></script> from the files.
This way you can use facebook sdk as well as vuejs in the instant games.
I'm trying to load a static HTML file (of a Jupyter notebook) inside a div in my Vue js app.
I tried doing <iframe src="/static/product.html"> but this renders the home page of the vue app inside the iframe.
What's the correct way to do this in vue?
Load vue ressource addon if not done already
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.10/vue-resource.min.js"></script>
In your app, create a component who load your static raw html page
Vue.component('statichtmlpage', function (resolve, reject) {
vue.$http.get('your_static_html_page.html', function(data, status, request){
var parser = new DOMParser();
var doc = parser.parseFromString(data, "text/html");
resolve({
template: doc
});
});
});
And add component tag where you like to display your page
<statichtmlpage></statichtmlpage>