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.
Related
I'm new to Vue 3 and I just created my first real life Vue project.
I would like to use and distribute this component (and it's subcomponents) to be used in any html page.
It's easy, right?
<div id="app"></div>
<script src="/js/chunk-vendors.99a5942c.js"></script>
<script src="/js/app.042d60b5.js"></script>
But how can I pass parameters to the main component when reusing it in some ordinary html page?
Parameters can be passed and read as globals:
<div id="app"></div>
<script>
window.myNamespace = { foo: 1 };
</script>
...
Or be passed as attributes and read from app element:
<div id="app" data-foo="1"></div>
...
This is suitable when Vue application is used as a sub-application (widget). For framework-agnostic reusable components, web components have to be used.
So I'm not sure what you're specific use case is, but if you're interested in making a multi-page app (MPA), then I suggest taking a look at the answer posted here.
What you would be doing here is actually mounting an instance of the Vue App itself onto an element every html page, and then pass props to that and it's children. Vue itself doesn't really support passing props to the root instance using element attributes, and it isn't the recommended way of using the framework, but if you are still interested in going down this route, I suggest taking a look at this answer here.
What I would suggest doing instead is taking a look at creating components, and passing those around. You can make separate files for each, and render them all in the main page, no need to create other pages. If that's something you're interested in, I suggest taking a look at routes or the making your project a multi-page app (MPA) instead of a single-page app (SPA) although the same concept would still apply, passing components to your main instance and building your app that way.
For passing parameters to components in Vue 3 I would suggest taking a look at the props page on the documentation here for more details.
I hope this is helpful! I tried my best to be thorough, I do suggest reading through the full documentation however!
When I navigate to a form using vue-router by adding a link with a <router-link> element, the form does not work. When I hit submit I get a 404 response.
However, if I navigate to it using an <a> tag (triggering a page reload) then it works perfectly.
I suspect that this has to do with the page rendering as a SPA and for some reason not loading an important part of the form for Netlify unless the form page is reloaded? Why is this happening and is there an elegant solution to the problem? I could just replace all links to forms with tags but I'm sure that there is a better solution, I just don't understand the problem well enough to find it.
For context, I am using Nuxt. The forms are recognized by Netlify on the backend and can accept submission with the tag link so that is not the problem.
Since you're using Nuxt, you probably should go SSG/full static with target: 'static' (hostable on Netlify-like platforms) or with target: 'server' (hostable on Heroku-like platforms) but at any point, you should have ssr: true (default value). When you do have this, the biggest part is done.
In Nuxt, you should use <nuxt-link> rather than <router-link>, it works exactly the same (takes the same params etc) but it's more specific to Nuxt and SSR/SSG compatible while <router-link> is not. More details here: https://nuxtjs.org/docs/2.x/features/nuxt-components#the-nuxtlink-component
So, with all of this it should already work great. If it's not, I will gladly help you spot the issue if you have a github repo.
An alternative solution can be to use some form without any SSR dependency like Formspree: https://formspree.io/ (works fine with any SPA)
It works great, really simple. But I'd rather invite you to make a proper SSR form since you're using Nuxt.
PS: use <a> tags only for external links aka the ones which do not start with your domain name, nothing else. A follow of this kind of link is like a hard refresh and should be avoided at all costs.
EDIT: how to deploy by cleaning the cache.
EDIT on how to achieve a working form:
<template>
<div>
<form
netlify
action="/"
method="POST"
name="Contact"
>
<input type="hidden" name="form-name" value="Contact" />
<!-- ... -->
</form>
</div>
</template>
As told in the docs:
[...] inject a hidden input named form-name [...] and the hidden form-name input’s value matches the name attribute of form
Working fine. Could add a honeypot to it to make it even more secure!
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).
Is it possible to add an Aurelia top level component without the router?
The goal is to create a component without the router since my application doesn't need any url based navigation.
From what I can tell Aurelia seems to take you down a path where components are instantiated via routing based on how the component is registered with the router.
Instead I would like to just add markup for the top level component on the main index.html page:
<my-component bind.current="'123456'"></my-component>
I would like define components without a router and only use the templating and data binding capabilities of Aurelia.
Is that possible?
Tried this in index.html (inside the body tag of the default project)
<require from='./dist/my-component'></require>
<my-component></my-component>
But it does not seem to pick it up. Ideally I would like to just define it in markup on a page served from the server since it would enable me to sett attributes dynamically on the elements
<my-component current.bind={{someServerGeneratedId}}></my-component>
In the above I would use a templating framework like mustache to dynamically render the Aurelia when the page is served from the server.
I could wrap the component in another "landing" component, but that makes it hard to benefit from setting things up with server generated bindings.
UPDATE:
Per Rob's response: https://github.com/aurelia/framework/issues/175#issuecomment-126965417
- He is expecting to add the ability to add a root component to the landing page in a future release. I understand there are ways to not use the router, but it still depends on pulling in a partial view during bootstrapping of the application. This does not use the router directly, but conceptually this is really just an implied/convention based client side nav. In the end there is a client side request to pull in the view, which means I can't generate the html dynamically from the initial server response.
Yes you can do this very easily without the router. Just remove the router configuration from your app.js and in app.html remove the router code there as well.
I think the issue you are running in to is that you are specifying the dist folder again in your index.html. You should just reference it like this -
<require from="my-component"></require>
<my-component current.bind="someServerGeneratedId"></my-component>
This will bind up correctly.
I guess you're missunderstanding the route concept here.
At the time of writing, Aurelia's index.html page is your initial page where you put your "loading" stuff and where Aurelia bootstraps the entire app.
So, you can't put a custom component directly on it, but that should not be a problem.
If you don't change any configuration on Aurelia, it will look for your app.html to bootstrap your app, and there you can have anything you want (routes or not, doesn't matter). So, you should put your component there, beside the other tags/components/etc you need.
I've made a plunker without any routing and with a custom component in the app.html, and something simulating what you need.
<template>
<require from='./my-component'></require>
<my-component current.bind="serverGeneratedID"></my-component>
</template>
http://plnkr.co/edit/mLb8Ym638b4V2e9LDp0A?p=preview
If you need anything else, comment here and I'll try to go further.