Open jordan-thoms opened 6 years ago
@jordan-thoms Have you found a way of passing the content inside <my-component>
as the default slot? (or named slots?)
We don't use slots at the moment, but it looks like you should be able to set the slot contents after the const instance =
line with instance.$slots.default = [ 'Some content']
(I'd guess you can set $slots.some_name
for a named slot). You could read that value from the
From : https://css-tricks.com/creating-vue-js-component-instances-programmatically/#article-header-id-3
I had a solution very similar to yours but using data atributes generated with backend helpers: the generated code looked like this: <div data-vue="mycomponent" data-$prop="3" data-propstr="mystr"></div>
, the original backend template code looks natural like the rest of the HTML).
I found very quickly that recursive elements were the real problem. A navbar with an animated logo inside (two components), a modal with a responsive image inside (two components), and so on. At the end half my page was already dynamic (extracting the HTML, compiling the vnodes, assigning the slots) so I went forth and enabled it for the whole page because our content is from trusted users and moved all inline scripts outside the element that will have Vue to avoid warnings.
As I understand it, If you use the runtime-only version of vue ( see https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only ), then the compiler is not present in your production environment and the '{{' blocks that might be there from server-side templating will not cause issues.
It is a little tricky to use Vue.js without the compiler when doing server-side templating, I ended up writing a init script like this:
And you can still use components in your html like:
<my-component a-property="somevalue"></my-component>
( I based this code on https://github.com/drewjbartlett/vue-multivue ).
What do you all think of this approach? It works well for us as we had all our templates in .vue files anyway, so losing the runtime compilation was not a big issue.