I am new to Vue and I have already migrated a small application to it, but now I wanted to add routing in the front end level, so I started looking at vue-router.
My components use inline-template because they are placed inside templates of a django application. This way, the django ecosystem takes care of the localization and also offers more information to logged-in users.
I could not find a way to make my components work with vue-router. I even tested using x-templates and it just does not work unless the template is a string inside the JS code.
Is it possible for vue-router to use external file templates? If not, how does vue-router handle the situation where templates are generated by a backend server?
I eventually found how to make it work. The trick was to place the x-templates outside the root Vue app element. This way the root Vue app did not tried to render them and then they were rendered by their components.
Related
What I am trying to do is similar to question in here
Main reason for me to have this approach is that my application has a plugin system, so some plugins gets installed at a later time. Each plugin have it's own resources including vuejs logic. Therefore I can't have pre-compiled vuejs like a traditional SPA.
The current approach works well and suitable for my overall architecture and is maintainable as well. However there is something that I came across which I can't understand.
That is if I want to cache a view component that uses tag helper, after it's being sent to browser vuejs doesn't seem to recompile any vuejs related views inside the cached content. For example;
<cache expires-after="#TimeSpan.FromDays(1)">
#await Component.InvokeAsync("SiteHeader")
</cache>
Now site header ViewComponent has vuejs in razor like;
<script at="Foot" type="text/x-template" id="vue-user-feedback">
//all html vuejs stuff here
</script>
The first time it loads and works, but then next time page loads these components are missing from the browser. If I remove the <cache/> it works fine.
Is it because the <cache/> instructs the browser to keep the data in browser cache or server as pre rendered html? Even if it's so; once it's loaded to browser shouldn't vuejs be able to find them and recompile?
I created a Vue.js app without using Vue CLI, so that means I did everything from scratch including setting up Webpack 4. The reason I did this was because I don't like the idea of frameworks concealing the inner workings of things so that I can't fix things myself.
As an SPA, I have got the basic demo site working with an Home and About view. But I am looking to create a multi-page app with Express. The only information on multi-page Vue.js apps seems to be linked to the pages option that only comes with Vue CLI (see here)
Is there a way to have a multi-page app for projects created without Vue CLI?
Sure, you could handle routing with Express and have the page rendered server-side.
You can use Vue official package for routing, vue-router and choose between SSR (server-side rendering) or client side.
I suggest you to check this official doc about it: https://ssr.vuejs.org/
I came across vuexpress, vuepress and vue-server-renderer. To me these are looking somewhere similer which I guess are not. I am not frontend developer so not able to understand exact difference and use of these three modules.
Their official sites are saying
https://github.com/vuexpress/vuexpress
vuexpress: Vue + Express.js = VueXpress / A server side rendering
engine for Express.js. Use .vue files as your express.js templates.
https://vuepress.vuejs.org/
VuePress: Vue-powered Static Site Generator
https://ssr.vuejs.org/
vue-server-renderer: server-rendered Single-Page Applications using
Node.js as the server.
vuepress and vue-server-renderer are official library from Vue.js
So what exactly are differences and use of these three modules?
The idea with Vue (from the perspective of your question) is that you create a single-page application.
vuexpress is a rendering engine you can use in an Express application if you want to use the Vue syntax to implement your Express views, i.e. you implement a dynamic website and use the Vue syntax.
vuepress is about building a single-page application in Vue that also prerenders each page (and some other goodies, such as using markdown) to improve initial page load and facilitate for search engines. It is primarily used for websites with static content, such as documentation.
The point with a Vue application is to run it on the client (in the web browser). With vue-server-renderer you can run it on the server to obtain the HTML code the web browser would render if it would run in the web browser, and send it to the web browser, so the web browser doesn't need to run your Vue application, but receives the HTML it would display instead. Why? To improve initial page load and facilitate for search engines. I imagine vuepress makes use of vue-server-renderer under the hood.
We have Rails app with Webpacker that serves just the initial HTML file, after which the client will download everything (inc. vue .js and .css) files.
Our problem is that we want to display something initial on the html so the user will feel as the site already loaded. This logic is in the main vuejs component. Is there a way to offline render this so it will be easily be embedded on our index page? instead of having to maintain and re-write this everytime?
It sounds like pre-rendering might be a better fit for you than full-on SSR. Since you're already rolling Webpack, there is a plugin that helps to that end called prerender-spa-plugin: https://github.com/chrisvfritz/prerender-spa-plugin
The idea behind this plugin is that, as part of your build process, it prerenders the resulting static HTML of your SPA using Puppeteer (i.e. headless Chrome), and drops it into your static HTML folder. It maintains links to your SPA code so it's still fully functional, it's just fully rendered by the time the user hits it.
What I'd suspect you'd want to try is the following:
Add the prerender-spa-plugin to your webpack.config.js
Configure the plugin to prerender your initial route and any additional routes that are truly static
Output the resulting files to the folder your Rails app uses to distribute static assets (HTML, CSS, images, etc)
Going the pre-render route is actually technically superior to SSR for truly static routes like a landing page or marketing pages. You won't need to mess with a complex pre-render setup on your Rails server, you offload content distribution to the static folder (i.e. lesser load on your Rails server), and you still get to use all the benefits of your SPA.
That being said, if you strongly feel like you do need full-blown SSR, the generally "accepted" approach is rolling a Node.js server (https://ssr.vuejs.org/). If you decide to go down this route, I'd keep your SPA assets in their own separate Git repo from your Rails server and manage DevOps appropriately.
Good luck!
Currently, we try to figure out, how we can structure our vue code for this use case:
routing will be handled by the backend, so basically we don't creating an SPA here
we want to use vue to replace some jquery plugins. So on some sites of our website we have e.g. a drop-down component or a date picker component ...
one site will be small SPA
on each site, we have a navigation, where we also want using vue
How should this be structured? Is it one big vue application?
My idea is to build two vue applications:
one for the small SPA
one for all the components we need on different sites
Anybody can help out here?
For developing SPA in vuejs. Please refer to these two links
https://github.com/vuejs/vue-cli
and
https://github.com/chrisvfritz/vue-2.0-simple-routing-example
And for integerating VueJS in existing web page
you can follow the official website of vuejS