Develop Reference

All elements after vue component are removed automatically

Please check out this page and its source code. If I remove the cdn for the vue-tag-input component, everything except the component renders. But as soon as I add the cdn back, everything after first instance of tag-input component is not rendered on DOM. No error logs.
Please help me understand what is going on. As far as I understand there should not be any issue with component as I can render multiple instances and the same page layout in vue app using cdn. Check out App.vue file as well. This works perfectly fine.

You need to use valid html5 so you can't use self closing tags.
Change <tag-input v-model="tags" /> to <tag-input v-model="tags"></tag-input>

When vue component is used directly inside the html (not in single file vue component template), we need to take care of certain things
Don't use self closing tag for the component
convert all camel case to kebab case for component name and all the props (custom attributes)
There were above two errors because of which the implementation in question was not working.

ReactDOM.render cannot find my div element

I am getting the classic error:
Error caught during routing: Error: Target container is not a DOM
element.
on this line of code:
ReactDOM.render(<GamerTag game={this.model} />, document.getElementById("gameDescription"));
I am rendering that React dom inside a Backbone view.
gameDescription is the ID of a div in my view's template where the React component is being rendered.
Like everyone says, put your main js file at the bottom of your main index file.
And I did, I put <script src="~/dist/app.js"></script> right before the ending </body> tag.
But I still get the error.
I know the div exists, because when I view the source in the browser, I see it.
Also, if I use document.body.appendChild(document.createElement("div")) inside the ReactDOM.render,
it works fine...well except for the fact that it's at the bottom of my page where I don't want it to be.
So I am horrid besides myself, what other options or things can I try? I am out of clues.
Thanks you!

Your element doesn't exist when react is trying to render your component.
I'm guessing this is because your backbone view isn't rendered at the time that react is trying to render the component.
An easy way to check this is to put a debugger; statement in your code just before your ReactDOM.render() call, and while stopped, open your DevTools, and look at the DOM and search for you element.
Or just open the console and run document.getElementById('gameDescription') and see if it's actually there.

How to deal with components inside dynamic html strings in Sapper & Svelte?

I am trying to make my first Sapper site and I'm populating the content similarly to how it's done in the template here.
My problem is that I want to allow usage of custom components in the content of {#html post.html}. Currently it doesn't work, the HTML is just inserted there without being treated like a component, even if I import the component in [slug].html and it works if used directly somewhere besides that {#html post.html}.
The behaviour is kind of expected as the content is fetched after svelte has finished it's work, but I am not sure what should I do then. I want a couple of custom components like <FancyButton> to be usable in the user generated content.
Can I ask the [slug].html component to look at the post.html or just whole content after insertion and create an instance of child component wherever it should be? Or should I somehow compile the string beforehand on the server?

Using Vue-cli, is it possible to build the CSS -into- the `dist/vue-COMPONENT_NAME.js` file?

TLDR: Does anyone know of an elegant way to make sure a component injects its own <style>{...everything in ./dist/vue-COMPONENT_NAME.css}</style> element into the page, but only once? SSR friendly too?
I've been on the hunt for a good solution to this for over 2 days now; I'm building a Vue component that is likely to be used by mostly non-built, client side environments, included in the page via script tag:
<script src="https://unpkg.com/vue-COMPONENT_NAME/dist/vue-COMPONENT_NAME.js"></script>
And, normally you would just use a link tag to get the styles in there:
<link rel="stylesheet" href="https://unpkg.com/vue-COMPONENT_NAME/dist/vue-COMPONENT_NAME.css">
..but I would like remove the requirement to add the additional (possibly forgotten) link tag to the page. I would like for this component to be able to automatically inject its required styles into the page, so it is never displayed in an un-styled state.
This is a graphics focused component using a Canvas for display, and some of its internal logic is built on analyzing the clientBoundingRect of the top level DOM node - So having the styles that set its size and proportions at mount is imperative.
I am also planing on using this component myself via Nuxt, so I'm going to have to make sure that whatever solution I come to avoids the dreaded "The client-side rendered virtual DOM tree is not matching server-rendered content." error message.
So far, I have been loving how low-configuration the build with vue-cli has been:
vue build vue-COMPONENT_NAME.vue --prod --lib VueCOMPONENT
...but its output is always the two files:
./dist/vue-COMPONENT_NAME.js
./dist/vue-COMPONENT_NAME.css
Is there an argument or configuration prameter for vue-cli that would cause it to build the styles into ./dist/vue-COMPONENT_NAME.js? Has anyone done anything like this with vue-cli?

Using add-hoc angular directive in an external html

This should be simple but I can't get it done right.
I have some custom angular directives working just fine, and I'm intended to use some in a external (other domain/server/port) html.
First, I included scripts from the working directives webapp:
<script
data-main="http://localhost:9000/vassets/javascripts/main.js"
src="http://localhost:9000/vassets/lib/requirejs/require.js">
</script>
Then I just tried to use one of them in the external html:
<div custom-directive attrib="abcd"></div>
Problem is template associated with directive cant be loaded, since it is declared as:
templateUrl: '/vassets/partials/customDirective.html'
And of course can't be found when external html is loaded.
There are alse issues regarding cross site.
It is clear that I'm not including external directives (and importing its source) correctly.

One thing which can be done is in the directives, instead of referencing to an external template, you can place the template inside the directive itself. Like:
template: '<div>Template here</div>'
Now when you export your directive file to a new app you will have no worries in exporting its template file as well.
Alternatively, you can keep your existing scenario and place the template in the location where the directive is looking for it.