Inject or Initialize Vue components in generated HTML - javascript

I use a an WYSIWYG article editor that generates some HTML for articles that I save in the database and later show to the user.
The problem is I need to insert Vue components into this auto generated HTML for showing dynamic products. I can make a custom block in the editor that adds in HTML but I want it to work as a Vue component that updates the product description directly from the database.
What Im thinking now is to add a button that adds a div with a data property of the products ID. I can then replace that div in the code with a Vue component with the same ID by injecting a component.
Another idea I had was to simply add in components like <product id="1031"/> as plain html and then try to compile the whole article HTML with Vue but I read that the v-html directive only compile code as plain HTML.
Is this possible? Or is there any better ideas?

If you are using the full build of Vue (not the runtime only build) you can initialize a new instance of Vue and mount it wherever you like, pass in data etc.
// Main app
new Vue({
el: '#app',
data: {
stuff: 'inserted message'
},
methods: {
clicked() {
// Add new
new Vue({
template: `<h1 style="color: red;">{{ message }}</h1>`,
parent: this,
data: {
message: 'new message'
}
}).$mount(document.getElementById('more'))
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<div id="app">
There are some things here before like {{ stuff }}
but when you press <button #click="clicked()">add more</button>
you can add more things here:
<div id="more"></div>
</div>

Related

vue create component from server rendered html

I have a Vue instance already loaded with webpack which loads .vue files properly. However there are some files that I cannot use load as some of the html is rendered dynamically from the server.
Suppose I have a HTML file with the content below:
<div id="test">
<input type="text" :value="message"></input>
</div>
How do I create a vue component with the template above?
This was my attempt.
const component = new Vue({
name: 'test-component',
el: '#test',
data: {
message: "hello world!"
},
});
What I want rendered is
<div id="test">
<input type="text" value="hello world!"></input>
</div>
If neither render function nor template option is present, the in-DOM HTML of the mounting DOM element will be extracted as the template. In this case, Runtime + Compiler build of Vue should be used.
---- https://v2.vuejs.org/v2/api/index.html#el

Adding or Injecting HTML or Component into Vue component generated at runtime

I have a Vue app where I take a bunch of markdown files and make them into Components that get dynamically generated and the links of which get handled by Vue Router. I'm loading my markdown using this Vue markdown loader.
The main route file looks like this:
import RamblePosts from "#/assets/rambles/rambles.json"; // Simple JSON that contains the name of the markdown documents
...RamblePosts.map(entry => ({
path: `/${entry}`,
name: entry,
component: () => import(`#/assets/rambles/${entry}.md`)
}))
];
As you can see, I'm generating components based off the markdown files I have in that directory.
Example usage would be:
<template>
<div class="wrapper-div rambling-wrapper">
<div class="ramble-cards-wrapper">
<RambleCard
v-for="route in rambleList"
:key="route.title"
:title="route.title"
:subtitle="route.subtitle"
:ramble-url="route.url"
/>
</div>
</div>
</template>
<script>
import RambleCard from "#/components/RambleCard";
import rambleList from "#/assets/rambles/rambleList.json";
export default {
components: {
RambleCard
},
data() {
return {
rambleList
};
}
};
</script>
This is a simple card element that just displays the name of the markdown entry, a subtitle and the vue-router link for it. Clicking on the link will take you to the relevant article, so something like url.com/foo
Is there a way for me to somehow edit or manipulate these markdown components and add, say, a Vue component to them or even just plain HTML? Since they're generated dynamically at, I'm not sure how to approach the situation because I can't just plug in a Component in the middle of those article components somewhere.

How to pass html template as props to Vue component

I have a textarea component that include html tag and I want to get html in edit mode in this component. I use Laravel to generate html.
<template>
<div>
<textarea
:value="content"
:name="name"
:id="id">
<slot></slot>
</textarea>
</div>
</template>
In blade page I used to this component:
<my-component>
<p class="textbox">hello world</p>
</my-component>
when I put this component in page show me tag <slot></slot> in textarea. What should I do? Do you have any solution for my need?
thanks
<textarea> components are treated as static by the Vue renderer, thus after they are put into the DOM, they don't change at all (so that's why if you inspect the DOM you'll see <slot></slot> inside your <textarea>).
But even it if they did change, that wouldn't help much. Just because HTML elements inside <textarea>s don't become their value. You have to set the value property of the TextArea element to make it work.
Anyway, don't despair. It is doable, all you need to overcome the issues above is to bring a small helper component into play.
There are many possible ways to achieve this, two shown below. They differ basically in how you would want your original component's template to be.
Solution: change <textarea> into <textarea-slot> component
Your component's template would now become:
<template>
<div>
<textarea-slot
v-model="myContent"
:name="name"
:id="id">
<slot></slot>
</textarea-slot>
</div>
</template>
As you can see, nothing but replacing <textarea> with <textarea-slot> changed. This is enough to overcome the static treatment Vue gives to <textarea>. The full implementation of <textarea-slot> is in the demo below.
Alternative solution: keep <textarea> but get <slot>'s HTML via <vnode-to-html> component
The solution is to create a helper component (named vnode-to-html below) that would convert your slot's VNodes into HTML strings. You could then set such HTML strings as the value of your <textarea>. Your component's template would now become:
<template>
<div>
<vnode-to-html :vnode="$slots.default" #html="valForMyTextArea = $event" />
<textarea
:value="valForMyTextArea"
:name="name"
:id="id">
</textarea>
</div>
</template>
In both alternatives...
The usage of the my-component stays the same:
<my-component>
<p class="textbox">hello world</p>
</my-component>
Full working demo:
Vue.component('my-component', {
props: ["content", "name", "id"],
template: `
<div>
<textarea-slot
v-model="myContent"
:name="name"
:id="id">
<slot></slot>
</textarea-slot>
<vnode-to-html :vnode="$slots.default" #html="valueForMyTextArea = $event" />
<textarea
:value="valueForMyTextArea"
:name="name"
:id="id">
</textarea>
</div>
`,
data() { return {valueForMyTextArea: '', myContent: null} }
});
Vue.component('textarea-slot', {
props: ["value", "name", "id"],
render: function(createElement) {
return createElement("textarea",
{attrs: {id: this.$props.id, name: this.$props.name}, on: {...this.$listeners, input: (e) => this.$emit('input', e.target.value)}, domProps: {"value": this.$props.value}},
[createElement("template", {ref: "slotHtmlRef"}, this.$slots.default)]
);
},
data() { return {defaultSlotHtml: null} },
mounted() {
this.$emit('input', [...this.$refs.slotHtmlRef.childNodes].map(n => n.outerHTML).join('\n'))
}
});
Vue.component('vnode-to-html', {
props: ['vnode'],
render(createElement) {
return createElement("template", [this.vnode]);
},
mounted() {
this.$emit('html', [...this.$el.childNodes].map(n => n.outerHTML).join('\n'));
}
});
new Vue({
el: '#app'
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<my-component>
<p class="textbox">hell
o world1</p>
<p class="textbox">hello world2</p>
</my-component>
</div>
Breakdown:
Vue parses the <slot>s into VNodes and makes them available in the this.$slots.SLOTNAME property. The default slot, naturally, goes in this.$slots.default.
So, in runtime, you have available to you what has been passed via <slot> (as VNodes in this.$slots.default). The challenge now becomes how to convert those VNodes to HTML String? This is a complicated, still open, issue, which may get a different solution in the future, but, even if it ever does, it will most likely take a while.
Both solutions above (template-slot and vnode-to-html) use Vue's render function to render the VNodes to the DOM, then picks up the rendered HTML.
Since the supplied slots may have arbitrary HTML, we render the VNodes into an HTML Template Element, which doesn't execute any <script> tags.
The difference between the two solutions is just how they "handle back" the HTML generated from the render function.
The vnode-to-html returns as an event that should be picked up by the parent (my-component) which uses the passed value to set a data property that will be set as :value of the textarea.
The textarea-slot declares itself a <textarea>, to the parent doesn't have to. It is a cleaner solution, but requires more care because you have to specify which properties you want to pass down to the <textarea> created inside textarea-slot.
Wrapping up and off-the-shelf alternatives
However possible, it is important to know that Vue, when parsing the declared <template> into <slot>s, will strip some formatting information, like whitespaces between top-level components. Similarly, it strips <script> tags (because they are unsafe). These are caveats inherent to any solutions using <slot>s (presented here or not). So be aware.
Typical rich text editors for Vue, work around this problem altogether by using v-model (or value) attributes to pass the code into the components.
Well known examples include:
vue-ace-editor: Demo/codepen here.
Vue Prism Editor: Demo here.
vue-monaco (the code editor that powers VS Code): demo here.
vue-codemirror: Demo here. This is by far the most starred on github.
They all have very good documentation in their websites (linked above), so it would be of little use for me to repeat them here, but just as an example, see how codemirror uses the value prop to pass the code:
<codemirror ref="myCm"
:value="code"
:options="cmOptions"
#ready="onCmReady"
#focus="onCmFocus"
#input="onCmCodeChange">
</codemirror>
So that's how they do it. Of course, if <slot>s - with its caveats - fit your use case, they can be used as well.
The short answer is NOT POSSIBLE
Your slot is put inside an textarea tag. Textare tag is only able to display the text content on its box.
So in the case you want a kind of "HTML edit mode", you may looking for an WYSIWYG editor, I recommend you can use CKEditor for VueJS, the editor even will allow you to direct edit HTML code
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html
Your HTML
<div id="app">
<ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
</div>
Your Component
const app = new Vue( {
el: '#app',
data: {
editor: ClassicEditor,
editorData: '<p>Editable Content HTML</p>',
editorConfig: {
// The configuration of the editor.
}
}
} );
In your case if you want to write your own content editor you can use div with attribute contenteditable="true" rather than textarea. After this you can write your text decoration methods ...
The generated html with laravel store in myhtml and use it in vue component.
Example: I also uploaded to codesandbox [Simple Vue Editor]
<template>
<div>
<button #click="getEditorCotent">Get Content</button>
<button #click="setBold">Bold</button>
<button #click="setItalic">Italic</button>
<button #click="setUnderline">Underline</button>
<button #click="setContent">Clear</button>
<div class="myeditor" ref="myeditor" contenteditable v-html="myhtml" #input="onInput"></div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String
},
data: () => {
return {
myhtml:
"<h1>Simple editor</h1><p style='color:red'>in vue</p><p>Hello world</p>" // from laravel server via axios call
};
},
methods: {
onInput(e) {
// handle user input
// e.target.innerHTML
},
getEditorCotent() {
console.log(this.$refs.myeditor.innerHTML);
},
setBold() {
document.execCommand("bold");
},
setItalic() {
document.execCommand("italic");
},
setUnderline() {
document.execCommand("underline");
},
setContent() {
// that way set your html content
this.myhtml = "<b>You cleared the editor content</b>";
}
// PS. Good luck!
}
};
</script>
<style scoped>
.myeditor {
/* text-align: left; */
border: 2px solid gray;
padding: 5px;
margin: 20px;
width: 100%;
min-height: 50px;
}
</style>

Vue js for non SPA apps - loading components in with out the app component

I am very new to Vue.js and I am trying to figure out a few things about it. One of the things I would like to use it for is to implement components without creating an SPA. So in other words I can make a reference to components in a static page with out having to have it run through App component.
When I have done this with react js I have used react habitat. I am wondering if there is something similar for Vue.js that is available or is it something you can do with out a third party module-tool.
You don't need any App component. Just assign any wrapper (div) to a Vue module (Vue instance). I use a component for retrieving contacts, for example.
You can have multiple Vue applications in one page. They just cannot overlap.
html:
<div class="col-md-4 col-sm-4" id="safeContactsFooter">
..some html stuff
<ul class="phone">
<li>Phone: <safe-contact type="phone" ></safe-contact></li>
</ul>
</div>
Vue module:
export default new Vue({
el: '#safeContactsFooter',
components : {
'safe-contact' : () => import('./components/Safe contact') ,
},
});
Then, you have to register the module only when the div with the proper ID is present. Otherwise, the console will yell at you that the object doesn't exist. I do it this way:
if(document.getElementById("safeContactsFooter")){
import('../Safe contacts/Safe contacts footer.Module.js');
}
You can do that by importing your components into a JavaScript file and creating a vue instance with a referenced element:
// JS File
import Vue from 'vue';
import YourComponent from './YourComponent.vue';
export default new Vue({
el: '#app',
components: {
YourComponent
}
});
// HTML file
<div id="app">
<your-component></your-component>
</div>

Jquery and Vue, .html() is not working

I have been playing with the Vue tutorial Here and I have added a simple Jquery .html function. However it is not working. I have added the jQuery plugin, and there are no errors in the console. I have my "App" component defined like this:
<template>
<div id="app">
<div id="mainMenu"> Hello </div>
</div>
</template>
<script>
import * as start from './assets/scripts/start.js'
export default {
name: 'app',
created: start.loadMainNavigation()
}
</script>
and my loadMainNavigation function like this:
function loadMainNavigation() {
$('#mainMenu').html("ASERFDASRF");
console.log("In load Nav");
}
I can see the "In load Nav" in the console. No errors, but the DIV still has the original "Hello" - What am I doing wrong?
The reason the content doesn't change is that, at the time you are executing your function, the component has not yet been rendered to the DOM. The DOM is not rendered until the mounted event.
Beyond that, however, you need to be careful when you are integrating jQuery and Vue, or avoid it altogether. The idiomatic Vue way to do this would be something like this.
console.clear()
new Vue({
el: "#app",
data:{
message: "Hello"
},
created(){
this.message = "ASERFDASRF"
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<div id="app">
<div id="mainMenu"> {{message}} </div>
</div>
There are a few times when you might mix jQuery and Vue (when you want to use a jQuery plugin for which there is no Vue counterpart, for example) but typically, there is almost always a way to do what you want without jQuery.

Categories