4 ms·

I tried nuxt (a vue framework) the other day and was disappointed. It seemed like a very straightforward way to create a UI over a REST backend, but I kept gett

I tried nuxt (a vue framework) the other day and was disappointed. It seemed like a very straightforward way to create a UI over a REST backend, but I kept getting stuck with the issue of how to have a clean separation of the back end and front end responsibilities. For example, I wanted to have a UI that was rendered based on the JSON payload that would get committed to a Vue Store. I consistently ran into issues where Vue would complain about the client rendered code differing from the server rendered code. Are there any js frameworks where you can specify which components are rendered on the server and which are clientside?

KaoruAoiShiho 8y ago
Strapi just released their tutorial on nuxt and other backend stuff. https://blog.strapi.io/cooking-a-deliveroo-clone-with-nuxt-vue-js-graphql-strapi-and-stripe-bonus-deploy-part-7-7/ https://blog.strapi.io/cooking-a-deliveroo-clone-with-nuxt-v...
- rajangdavis 8y ago
  I appreciate the share, but looking at this example(https://blog.strapi.io/cooking-a-deliveroo-clone-with-nuxt-vue-js-graphql-strapi-and-stripe-restaurants-list-part-2-7/#gist90478038 https://blog.strapi.io/cooking-a-deliveroo-clone-with-nuxt-v...) it appears that they are employing a pattern that I do not want. I want to be able to have essentially have everything server rendered with reactive views. Not sure if there is anything that supports that, but I feel like that's how a SPA "should" work to an extent. Also, what gets really weird is if you are trying to use environmental variables. The solution is to inject your environmental variables into the client (https://nuxtjs.org/api/configuration-env/ https://nuxtjs.org/api/configuration-env/) which is what I want to avoid. I can do what I want to an extent with Ruby and Sinatra, I just want to avoid setting up webpack and babel for getting the reactive components.
breakingcups 8y ago
With Nuxt, use the <no-ssr> component: https://nuxtjs.org/api/components-no-ssr/ https://nuxtjs.org/api/components-no-ssr/ All my similar issues went away after discovering that.
- rajangdavis 8y ago
  This the exact opposite of what I am looking for; I want to be able to have components and pages that are rendered on the server side only
sne11ius 8y ago
I haven't used nuxt, but this vuejs component "hides" the wrapped component during server render: https://github.com/egoist/vue-no-ssr https://github.com/egoist/vue-no-ssr Regarding the "client/server render results do not match" issues: Fixing these is mostly easy in my experience, especially since vue will log the offending dom nodes to the dev console.
- rajangdavis 8y ago
  To clarify, this is not quite what I am looking for. My challenge is that I don't want everything to be rendered on the client. I only want very specific things to be client rendered and nuxt does not have a way to do this (I think). The no-ssr thing is the opposite of the functionality that I would like. I want to have the ability to declare which pieces are only server rendered and sprinkle in in client-side rendering where it makes sense.

KaoruAoiShiho 8y ago

Strapi just released their tutorial on nuxt and other backend stuff. https://blog.strapi.io/cooking-a-deliveroo-clone-with-nuxt-vue-js-graphql-strapi-and-stripe-bonus-deploy-part-7-7/ https://blog.strapi.io/cooking-a-deliveroo-clone-with-nuxt-v...

rajangdavis 8y ago
I appreciate the share, but looking at this example(https://blog.strapi.io/cooking-a-deliveroo-clone-with-nuxt-vue-js-graphql-strapi-and-stripe-restaurants-list-part-2-7/#gist90478038 https://blog.strapi.io/cooking-a-deliveroo-clone-with-nuxt-v...) it appears that they are employing a pattern that I do not want. I want to be able to have essentially have everything server rendered with reactive views. Not sure if there is anything that supports that, but I feel like that's how a SPA "should" work to an extent. Also, what gets really weird is if you are trying to use environmental variables. The solution is to inject your environmental variables into the client (https://nuxtjs.org/api/configuration-env/ https://nuxtjs.org/api/configuration-env/) which is what I want to avoid. I can do what I want to an extent with Ruby and Sinatra, I just want to avoid setting up webpack and babel for getting the reactive components.

breakingcups 8y ago

With Nuxt, use the <no-ssr> component: https://nuxtjs.org/api/components-no-ssr/ https://nuxtjs.org/api/components-no-ssr/ All my similar issues went away after discovering that.

rajangdavis 8y ago
This the exact opposite of what I am looking for; I want to be able to have components and pages that are rendered on the server side only

sne11ius 8y ago

I haven't used nuxt, but this vuejs component "hides" the wrapped component during server render: https://github.com/egoist/vue-no-ssr https://github.com/egoist/vue-no-ssr Regarding the "client/server render results do not match" issues: Fixing these is mostly easy in my experience, especially since vue will log the offending dom nodes to the dev console.

rajangdavis 8y ago
To clarify, this is not quite what I am looking for. My challenge is that I don't want everything to be rendered on the client. I only want very specific things to be client rendered and nuxt does not have a way to do this (I think). The no-ssr thing is the opposite of the functionality that I would like. I want to have the ability to declare which pieces are only server rendered and sprinkle in in client-side rendering where it makes sense.