Vuejs SSR, Laravel and PHP V8Js issue "window is undefined"

Question

I am trying to render server side code on page load by following https://medium.com/js-dojo/advanced-server-side-rendering-with-laravel-vue-multi-page-app-486b706e654 . Everything works fine but when I try to use global variable "window" or "document"

my app.js code is

import App from './components/App.vue';
import Vue from 'vue';
import { createRouter } from './router'
import { createStore } from './store'
import { sync } from 'vuex-router-sync'
require('./bootstrap');

The bootstrap.js is normal as

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

I need axios globally but php V8Js gives error V8Js::compileString():612: TypeError: window is undefined

I found that V8Js doesn't have browser variables and I tried using npm package browser-env but getting same error. see the screenshot http://nimb.ws/zGDmXO

Thank you

Ismail Ansari · Accepted Answer · 2018-08-13 07:23:53Z

1

you have to get rid from windows and document using for the JS string that you are passing to V8Js::executeString because it looks for document and window but it doesn't exists that time and code is executing at the server-end.

In your app.js Do something like this:

import axios from 'axios';
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

and at back-end do like:

$rendererSrc =\file_get_contents()(\base_path('node_modules/vue-server-renderer/basic.js'));
$appSrc = file_get_contents()(\public_path('js/entry-server.js'));
$v8Js = new \V8Js();
$v8Js->executeString(
                <<<EOT
    var process = { env: { VUE_ENV: "server", NODE_ENV: "production" } }; 
    this.global = { process: process };
    var url = "path_you_are_hitting";
    {$rendererSrc}
    {$appSrc}
EOT
);

Hope it'll work

answered Aug 13, 2018 at 7:23

Ismail Ansari

111 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shahbaz Ahmed Over a year ago

Yes but what if want to use localStorage because it is also not defined

jartaud Over a year ago

The server knows nothing about localStorage. You'll have to use cookies.

Collectives™ on Stack Overflow

Vuejs SSR, Laravel and PHP V8Js issue "window is undefined"

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related