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>
Related
I followed Markus Oberlehner for loading Vue components via http. We have a Vue component precompiled as a .js file hosted on a separate server. When the user navigates to this loader component below, the call to externalComponent() successfully fetches the .js file and renders the component on this page. That is great. This only works if we hardcode the url in the loader component.
We are building a plugin architecture into our site. We have written some single page Vue component files. Each of these files is a plugin. We precomiled these .vue files into .js files according to Markus Oberlehner's helpful tutorial here: https://github.com/maoberlehner/distributed-vue-applications-loading-components-via-http.
We also have a Vue component in our main site - let's call it the loader component - that fetches a .js file and renders it into a component using the externalComponent() method - demonstrated in Markus's tutorial. This works, but since the MyComponent is a constant defined outside of the loader component's data object, we cannot dynamically inject the plugin_id of from the vue router into the .js file's url.
If you're curious why our urls don't end in .js it is because we are passing a url to an endpoint in our server instead. This endpoint fetches the .js file and returns it to our client.
<template>
<div>
<MyComponent />
</div>
</template>
<script>
import util from "~/js/util.js";
let MyComponent = () =>
/* If we hadcode the url, the page renders no problemo.
*
* util.externalComponent("http://localhost:8081/api/plugins/167/code");
*/
/* However, we'd like to fetch the plugin_id from the Vue router and inject that into the argument
* as I've tried to achieve in the line of code below.
*
* The following code does not work because Vue apparently loads the MyComponent element in the DOM
* before executing the created() hook. We get the error "plugin_id is not defined."
*/
util.externalComponent(
"http://localhost:8081/api/plugins/" + plugin_id + "/code"
);
export default {
name: "plugin",
components: {
MyComponent
},
data() {
return {
plugin_id: null
};
},
created() {
/* This line does indeed populate the plugin_id data variable, although this happens after the
* page attempts to load MyComponent
*/
this.plugin_id = this.$route.params.plugin_id;
}
};
</script>
So, how can we modify this code to dynamically insert the plugin_id into the url?
This is a nuxt project by the way.
Update
Here is an approach that works the first time I load the page, but consecutive loads are still a problem. Specifically, the first component just loads again regardless of whatever the new plugin id may be.
But this looks like the right direction...
<template>
<div>
<component v-bind:is="component" v-if="loadedUrl"></component>
{{ plugin_id }}
</div>
</template>
<script>
import util from "~/js/util.js";
export default {
name: "plugin",
props: [],
data() {
return {
loadedUrl: false,
component: null
};
},
beforeRouteEnter(to, from, next) {
next(vm => {
vm.loadedUrl = false;
vm.component = () =>
util.externalComponent(
"http://localhost:8081/api/plugins/" + to.params.plugin_id + "/code"
);
vm.loadedUrl = true;
next();
});
},
beforeDestroy() {
//does not seem to help.
console.log("in beforeDestroy");
this.component = null;
}
};
</script>
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?
I'm using vue-js and have write some external JavaScript code. The JS work only when I refresh the page. But, in single page application no need to refresh the page. How apply JS without refreshing the page ? Bellow is my JS code which need page refresh to work.
$('.toggle_description').click(function () {
description = $(this).prev();
description.toggle();
if (description.css('display') == 'none') {
$(this).html('نمایش');
$(this).removeClass('btn-primary').addClass('btn-success');
} else {
$(this).html('پنهان');
$(this).removeClass('btn-success').addClass('btn-primary');
// $(this).removeClass('btn-primary').addClass('btn-success');
}
});
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 am working with vue.js, while rendering vue page i am getting below
error "Cannot GET /KForm"
Below are my code in main.js
import * as componentBase from "#app/app_start"
import Form from "#views/Form/Form.vue"
import KForm from "#views/KForm/KForm"
const NotFound = { template: '<p>Page not found</p>' }
const routes = {
'/': Form,
'/recap': Recap,
'/KForm': KForm
}
const app = new Vue({
...componentBase,
data: {
currentRoute: window.location.pathname
},
computed: {
ViewComponent() {
return routes[this.currentRoute] || NotFound
}
},
render: h => h(this.ViewComponent)
}).$mount("#app")
I'm not sure what your webpack config is, but shouldn't the KForm import be this:
import KForm from "#views/KForm/KForm.vue"
^^^^
currentRoute is set to window.location.pathname one time only when the component is instantiated. When you click a link (or navigate directly from the browser's address bar) to, say /KForm, the window location changes and the browser tries to fetch the webpage at that new address just like in a traditional non-SPA webpage. This will fail unless the server responds to that URL.
To prevent the browser from doing this, you'll have to intercept <a> clicks and use the history API to change the window location without reloading the page, then change currentRoute accordingly.
Or better yet, just use vue-router which does all this for you. See this for example server configurations for HTML5 history mode.