vue-server | Vue.js server-side version | State Container library

I have managed to find the solution to this thanks to the following resources:

• Server Side Rendering with Vue.js 3 video: https://www.youtube.com/watch?v=XJfaAkvLXyU&feature=youtu.be and git repos: https://github.com/moduslabs/vue3-example-ssr

• SSR + Vuex + Router app : https://github.com/shenron/vue3-example-ssr

• migrating from Vue 2 to Vue 3 https://v3.vuejs.org/guide/migration/introduction.html

• migrating from VueRouter 3 to VueRouter 4 https://next.router.vuejs.org/guide/migration/

• migrating from Vuex 3 to Vuex 4 https://next.vuex.vuejs.org/guide/migrating-to-4-0-from-3-x.html

client entry file (src/main.js)

Pretty sure that this is to do with your webpack coniguration. I think it's because style loader is trying to inject your styles into the DOM (which obviously is not present on the server side). Hence the reference error. I'm not 100% sure, but try only using vue-style-loader. There's no need to put it in a chain with style-loader as they are pretty much doing the same thing.

Also run your build command on the project and take a look into the server-bundle. That will show you who's trying to access the DOM.

EDIT:

As a general approach to what you're trying to do, you should also include sass/css in one single rule, like this:

Vue-server-renderer can only be used with vue version 2. One of the big changes with version 3 is that it now has SSR support baked in.

So instead of using the vue-2.0 server-renderer you now just have to use vue's createSSRApp. On the server, to render the thus created app to a string that you can send to the browser you'd use renderToString method which you can import from @vue/server-renderer (note that you have to install this package seperately).

As a super basic (without bundler or anything) example this would look sth like this:

I have resolved this for the time being by copying to my server the following

• index.html
• server.js
• the "dist" folder (containing the server bundle)
• the "public" folder (containing the client bundle, stylesheet and other files)

Then on the server i can run

Reason is quite simple, If you will go to 'vue-server-renderer' you will get {createBundleRenderer} as an export member.

If you want to use like

TLDR: The default export.

Say a particular library named "module" has the following code

From the Gridsome docs:

gridsome build uses server-side rendering (SSR) to create a fully rendered page. If your Vue component does not support SSR ... it won't be rendered properly.

we suggest you to encapsulate the component inside tags and import the library inside Vue's mounted() handler.

The error you got is from vue-server-renderer, which is from Vue's server-side API. You'll need to implement the instructions above.

Also, without knowing how you've enabled loading JSON as a module (i.e. ~) in development, perhaps that's an issue, because that doesn't work in the default Vue CLI environment.

Try removing the ~ from all imports:

When you are installing laravel/ui, it's attempting to install the version 2.x which requires Laravel 7.

You can use the following command to install it for Laravel 6.x:

You are right, this is because SSR - there is no window during build. One way is to use tags in your template and make all this things in mounted() in export.

In this particular case you are lucky: there's a plugin for your component. Gridsome plugin library contains many wrappers for vue components, so you can use them easier.