Never mind any routing or any of the other developy stuff (unless its needed), if you used the basic SSR example on the Vue docs https://vuejs.org/v2/guide/ssr.html
import Vue from 'vue'
let data,
app = new Vue({
render: function (h) {
return h('p', 'hello world')
}
})
// Step 2: Create a renderer
let renderer = require('vue-server-renderer').createRenderer()
// Step 3: Render the Vue instance to HTML
renderer.renderToString(app, function (error, html) {
if (error) throw error
data = html
// => <p server-rendered="true">hello world</p>
})
How could I render this on my index.html page , without some kind of Meteor client request for data from the server after the page has loaded?
I would even like to know just in general, Vue aside (but Vue would be preferred). But if I figure out one I can pretty much figure out the other.
Ok, I am throwing in the towel (for now on this endeavor). I spent the last two days trying to deep dive how this might work. And trying everything from integrating meteorhacks:ssr, various other code and thought experiments. But I have expired my current Meteor ability to morph up a solution.
Although, I did not walk away completely empty handed. I gained a little bit deeper understanding of Meteors inner workings. I would also suggest everyone take time to explore some of Meteors global-ish variables like Meteor, Blaze and Template, etc. aside from just using them in the routine sense. You might find something useful in there.
As simple as this may seem, I think stuff like this goes unnoticed
Which you might of guessed is the Meteor equivalent to writing “document.body.innerHTML”. With most of what people are doing now is vue layers and routing these could be a helpful in combination with or without Blaze.
How did you integrate Vue into your Meteor application (meteor npm install vue)? What other libraries are you using (besides vue) to integrate Vue? What router are you using with Vue? How are you fetching data (are you using sub/pub)? How are you updating (meteor.call())?
I’m on Meteor 1.3.5.1 and using Blaze. I’d like to move a few screens over to Vue but can’t find any recent resources on how to integrate.
I didn’t do anything further then just try to pass a Vue template from the server to the client. For that I did the standard import for Vue and Vue SSR, although it was unsuccessful.
Thanks. But how did you get vue into your Meteor project (syntax) and are you using any other vue-related libs to get basic things to work? Does data fetching work the same way as it does with Blaze for example?
To get Vue into my project I used stanard ES6 import syntax. I didn’t do any fetching, the only thing I was testing was passing Vue SSR templates to the client.
For that I didn’t attempt anything like a Meteor call, sub or pub because those are async actions and would of defeated the purpose of SSR. Instead I was trying to attach my logic to global Meteor variables regarding the Template object.
Yeah, I can see you were trying for something else. I was just trying to find recent info on how ppl are integrating Vue into Meteor is all. Thanks anyhow.
You can at least on a basic level, I had to wrap my in Template.rendered functions. Then for rendering HTML on the client I used the above render functions.
I had issues with Vue router, so I couldn’t completely ditch Blaze or flow router.
In my case I don’t want to “mesh” Blaze with Vue. I’d only want to replace Blaze screens with Vue or new screens would go Vue. In that case why would I need to wrap Template.name.onRender() in anything?
