I see that html files in examples with Vue consist only of one root "div" element with "app" id and actually no more elements in the file. HTML elements inside are rendered as templates in js (or vue) files. And it is fine for SPA.
However, I have a multi-page application which is rendered and routed in backend (PHP) and I don't want to change it. But I would like to use Vue for some reactive elements only (e.g wizard) in the application keeping the other pages and routing as they are.
What is the best practice for it?
A) Creating a new Vue instance for every element I need. So it would be look like:
<body>
<header></header>
<div>
... other html elements ...
<div id="vue_wizard>
<div>
Could I place the html elements for the wizard here or should I render them in VUE JS files?
</div>
</div>
... other html elements ...
</div>
<footer></footer>
</body>
B) Actually I don't have any other idea for it.
Related
I am a newbie in Vue.js. I am currently using Vue.js on top of asp.net core.
I noticed that in 99% time page is served before Vue.js syntax is rendered. How can I prevent this from happening?
For example
When page load first I see
<ol>
<li v-for="u in subscribers">{{ u.name }} - {{u.email}}</li>
</ol>
And then after split of a second I see
<ol>
<li>John - john#domain.com</li>
<li>John1 - joh1n#domain.com</li>
</ol>
Since the template is written inside the page HTML code it will always be shown first by the browser when it’s loading the page. Usually Vue components include a template which is used to render the data and this won’t happen.
You can take the template that is written on the page and add it to the Vue component so it will use it to render, not the contents of the page. The simplest way is to just add the template as a parameter to the Vue component, but later on it may be better to use separate template files, or Single File Components which may take a bit more work.
Is there any way to make two different files for HTML and components in Vue.js? Meaning the HTML code is in a different file from the component's code like with Angular.
If your goal isn't to avoid precompilation, you can still use single-file components and split the js and css into different files. They include an example of this structure in the docs.
<template>
<div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>
So basically, when using components - the app root passed to the Vue instance gets replaced by whatever HTML is in the component. Is there a way to disable this and just nest the stuff Vue renders inside the app root instead?
for example - if index.html has a wrapper of
<div id="myVueApp"></div>
and I set el: "#myVueApp" on the Vue instance, the whole node will get removed and replaced by whatever I have in my template resulting in
<div id="myComponent">...</div>
Is there a way to make it into
<div id="myVueApp">
<div id="myComponent">...</div>
</div>
Should work. From what I understand, you want to have multiple parts of your Vue app to be splitted up in the rendered HTML output as well, more specifically into multiple divs.
I think this should work if you use multiple Vue instances.
Set up a structure in your HTML file and give them appropriate id's.
Then, create the Vue instances you want and assign each of them to their specific div using el.
However, I can't tell you if this is a good idea and follows the best practice..
Hope this helps!
Server side rendering page for reference: ssr.html
Now the problem, what if we want to define template inside the <div id="app"></div> in html file itself, not in Vue instance template property? Like this:
<div id="app">You have been here for {{ counter }} seconds.</div>
In this case if we want to pre-render it, we will get next pre-rendered html:
<div id="app" server-rendered="true">You have been here for 0 seconds.</div>
And here is the conflict problem. If we will output pre-rendered html, we lose our template and Vue doesn't know where to output counter inside our <div id="app">.
Is it possible somehow to provide template inside <div id="app"></div> container and in the same time pre-render it? Or provide template near the pre-rendered in html(so Vue will know that here is pre-rendered and here is template and i will use it if any changes happens in the model)?
Is it possible somehow to provide template inside container and in the same time pre-render it? Or
Short but complete answer: No. For Vue SSR, you cannot use in-DOM templates. You have to use string-based templates (including Single File Components).
I know that Aurelia is a framework for an SPA but I need to open multiple pages at the same time inside the browser.
I want to host each page (view/viewmodel) within a draggable div and have more than one open at the same time. They will be selected by the User from a menu.
I have looked at viewPorts but cannot see how they will help in this problem.
Is there another way to do this?
Yes, there is a way to do this.
You say pages, but basically they are components. Every component has a HTML (view) and JS (view-model) file. They can be included as custom-elements.
So if you want multiple possible components on one page, all you need to do is create one component that has a placeholder for those views.
Probably, you would want something looking like this:
running Gist example
<template>
<require from="./page1"></require>
<require from="./page2"></require>
<page1></page1>
<hr>
<page2></page2>
</template>
You can create loop for all elements you want to display, if you need multiple instances of the same page, and put a repeat.for on the elements:
HTML:
<template>
<require from="./page1"></require>
<require from="./page2"></require>
<page1 repeat.for="i of page1instances"></page1>
<hr>
<page2 repeat.for="i of page2instances"></page2>
</template>
JS:
export class App {
const page1Instances = 4;
}
Making them drag&droppable works like every other element, there are many solutions for that to be found. Just make the <page1> and <page2> draggable.