I'm in the process of migrating some legacy pages to web components using StencilJS, so I'm in a situation where some elements are already handled with StencilJS, some are not, and migrating everything will take quite some time.
In this context I need to be able to update the contents of a target div not managed with StencilJS from a StencilJS component. This div is in a totally different branch of the DOM and it's impossible to move it into the component without rethinking the entire page.
So from my component I need to be able to do something like this:
render() {
const target = document.getElementById(this.targetDiv);
if (target) {
target.innerHTML = jsxToString(this.renderDivContents()) // obviously this doesn't work
}
}
renderDivContents() {
return (<p>Some JSX stuff</p>)
}
So, in other words I need to compile the JSX template immediately into a string. I'm not sure how to do that with StencilJS and if it is even possible. I'm under the impression that there is a way to achieve that because it looks very similar to what we do in tests, but all the resources I find on the topic are for JSX with React and does not really help with StencilJS
If this is not the correct approach, what do you suggest? I know injecting HTML into a DOM element is not ideal, but I'm just trying to find a temporary solution to be able to release my changes gradually.
PS: I know I can also use an overlay approach (generate a div into the component and give it the same position and size than the target div), but this sounds even uglier than innerHTML. This is not the answer I expect.
Related
I'm new to Nuxt and Vue in general, so I'm not sure, what would be the best solution for this use case.
I want to change the text (like "Home", "Settings", "Favourites" etc.) inside my Header.vue (always fixed on top of the page) from another component. like Favourites.vue for example.
Sometimes I want to hide the header completely or hide the title and display buttons instead,
so I need to pass more props than just the title.
I tried using different layouts, but that breaks the animation transitions (I haven't found the solution for this yet), but I think it's still better to have control from the page in what I'm passing into this component.
Should I pass props from Page.vue to parent and read it from there in Header.vue component?
Should I use Vuex to pass this through the store and update it when the route changes? Or is that too complex for this use case?
Maybe there's a simpler solution that I'm not aware of.
Folder structure:
/components
├──Header.vue
└──Nav.vue
/pages
├──Index.vue
├──Profile.vue
├──Settings.vue
└──Favourites.vue
Vuex is the answer here— don’t worry about the 'simple' use case. As soon as you notice you’re creating data that other components may rely on (is the header visible on this page? Is the text different? etc) it’s a good idea to move into Vuex and maintain a single source of truth.
Your app may seem simple to begin with, but it’ll inevitably grow and at that point you’ll appreciate having a single source of truth vs. trying to pass things between components via props.
Nuxt also makes implementing Vuex very straight forward. No doubt you’re capable of pulling up the docs!
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've been breaking my head over this for the last few hours and no matter where I look I can't seem to find the answer.
I'm using vue2-frappe as my chart library. I'm using a simple bar chart to display certain values by day. Everything was fine until my higher-ups decided they wanted to show a whole year's worth of values on this chart, meaning I have to add some pagination to it.
The problem is, now I can't figure out how to make the chart rerender. I've tried replacing the entire object I've bound the chart to, as well as manipulating specific values, but nothing seems to make the component rerender.
In the documentation for frappe.js, you can modify data via specific methods, but this being Vue I can't just call chart.update() like in normal .js. And if I inspect the component via vue dev tools, I can see it contains the modified data, it just doesn't redraw itself.
Anyone have an idea what to do?
I would try to force update the view component.
VueJs reactivity can sometimes be confusing where you think it should react to changes but it doesn't.
You can force a view update like so:
// Globally
import Vue from 'vue';
Vue.forceUpdate();
// Using the component instance
export default {
methods: {
methodThatForcesUpdate() {
// ...
this.$forceUpdate(); // Notice we have to use a $ here
// ...
}
}
}
You can read about correct ways of re-rendering here: https://michaelnthiessen.com/force-re-render
There are caveats to this approach as outlined in vueJs's docs: https://v2.vuejs.org/v2/guide/list.html#Caveats
Note #
A force re-render wont update computed values, but your computed property shouldn't contain any external non-reactive variable anyway.
Note 2
The above article written by Michael Thiessen also states the best way in his opinion is key-changing which I think we all should be aware of.
I hope this puts you on the right track. It sounds like (with limited information) you could be replacing the data but using the same key.
Somehow I still can't wrap my head around some core vue concepts.
I have made some simple webpage using phalcon. Created it so, that it would work without JS and now is the time to add some bells and whistles - ajax queries and the like, for the user experience to be better.
I wanted to do everything using vue, to see how it all adds up. But after hours of googling I still can't find solution for the simplest of tasks.
Say: I want to get a text paragraph in a series of <li>-s and change it somewhat. Maybe make excerpt of it and add 'see more' button behind it. Now, in jQuery I would just iterate with each() and perform the tasks. With vue targeting set of DOM elements is much harder for me, probably because of whole paradigm being "the other way round".
I know I could iterate with v-for, but these elements are already in the DOM, taken from the database and templated with volt. I had even this wild idea of creating .js files from phalcon, but it would completely negate my strategy of making functional webpage first and then enhance it progressively.
Frankly speaking I feel like I'm overcomplicating for the sake of it, right now. Is vue even fit for a project like this, or is it exclusively a tool to build app from the ground up?
Vue's templating is client-side, which means if you are delivering an already templated html page (by your backend) there is little vue can still do for you. Vue needs data, not DOM elements to build its viewmodels.
This becomes pretty obvious when building a single page application for example, which would be rendered only on the client-side. You'd simply load the data asynchronously from a backend api (REST for example) and then do all the rendering on the client.
As far as I understand your usecase you want to mix client and server side rendering, rendering most of the non-interactable content using your backend's templating engine and adding some interactivity using vue. In this case you'll need to add some vue components (with their own rendering logic) to your backend template and pass data to that component using vue's data-binding.
Here's an example:
...
<div id="app">
<my-vue-list :products="{% products %}"></my-vue-list>
</div>
...
And in your JS:
var app = new Vue({
el: '#app',
data: {
components: {MyVueList} // You will have to register all the components you want to use here
}
})
Vue provides the ref attribute for registering a reference to a dom element or child component:
// accessible via this.$refs.foo
<li ref="foo">...</li>
Do note, however, that refs are not reactive, as stated in the docs:
$refs is also non-reactive, therefore you should not attempt to use it in templates for data-binding.
I am currently developing a web application that is used to display elements for events on a map provided by HERE Maps. I am using Vue.
I have some components, but the relevant component is the component HereMaps.vue which initializes the map using the HERE Maps Api.
The HERE Maps Api provides the possibility to place so called InfoBubbles on the map showing additional information. These InfoBubbles can be provided some HTML-code in order to customize their appearance.
Please refer to the documentation for additional information
Following the documentation the code looks something like this:
let bubble = new H.ui.InfoBubble(marker.getPosition(), {
content: "<div class='someClass'>Some Content</div>"
});
this.ui.addBubble(bubble)
This is happening after mount in the "mounted" method from Vue in the "HereMaps" component.
The Bubbles are added in a "closed" (hidden) form and dynamically "opened" to reveal their content when the corresponding marker icon on the map is clicked. Therefore the HTML-code is present on the DOM after the component is mounted and is not removed at a later stage.
Now instead of supplying custom code within each bubble added to the UI i want to just add a component like this:
let bubble = new H.ui.InfoBubble(marker.getPosition(), {
content: "<myDynamicComponent></myDynamicComponent>"
});
this.ui.addBubble(bubble)
It does not matter to me wether the component is initialized using props or if it is conditionally rendered depending on the state of a global variable. I just want to be able to use the "myDynamicComponent" in order to customize the appearance in a different file. Otherwise the design process gets very messy.
As far as i know this is not possible or at least i was not able to get it work. This is probably due to the fact that the "myDynamicComponent" is not used within the "template" of the "HereMaps" component und thus Vue does not know that it needs to render something here after the directive is added to the DOM in the "mounted" method.
This is what the InfoBubble looks using normal HTML as an argument:
This is what the InfoBubble looks using the component as an argument:
It appears to just be empty. No content of the "myDynamicComponent" is shown.
Does anyone have any idea how i could solve this problem.
Thank You.
Answer is a bit complicated and I bet you wouldn't like it:)
content param can accept String or Node value. So you can make new Vue with rendered your component and pass root element as content param.
BTW, Vue does not work as you think, <myDynamicComponent></myDynamicComponent> bindings, etc exists in HTML only in compile time. After that all custom elements(components) are compiled to render functions. So you can't use your components in that way.
Give us fiddle with your problem, so we can provide working example:)