vue-hackernews-2.0
vue-hackernews-2.0 copied to clipboard
vuejs
window is not defined
How do I use plugins that require the browser's global window object?
I'm trying to use this package https://www.npmjs.com/package/vue2-google-maps
Thanks...I tried it in app.js and I get:
`Syntax Error: 'import' and 'export' may only appear at the top level (19:2)
17 |
18 | if(typeof window !== 'undefined'){
19 | import * as VueGoogleMaps from 'vue2-google-maps'
| ^
20 |
21 | Vue.use(VueGoogleMaps, {
22 | load: {
@ ./src/entry-server.js 1:0-34
`
Here's my code
` import Vue from 'vue' import App from './App.vue' import { createStore } from './store' import { createRouter } from './router' import { sync } from 'vuex-router-sync' import titleMixin from './util/title' import * as filters from './util/filters'
import VueResource from 'vue-resource'
Vue.use(VueResource)
Vue.mixin(titleMixin) // mixin for handling title Object.keys(filters).forEach(key => { // register global utility filters. Vue.filter(key, filters[key]) })
if(typeof window !== 'undefined'){ import * as VueGoogleMaps from 'vue2-google-maps'
Vue.use(VueGoogleMaps, { load: { key: 'key' }, }) }
// json filter is now not bundled with vue Vue.filter('json', x => JSON.stringify(x));
// Expose a factory function that creates a fresh set of store, router, // app instances on each call (which is called for each SSR request) export function createApp () { // create store and router instances const store = createStore() const router = createRouter()
// sync the router with the vuex store.
// this registers store.state.route
sync(store, router)
// create the app instance.
// here we inject the router, store and ssr context to all child components,
// making them available everywhere as this.$router and this.$store.
const app = new Vue({
router,
store,
render: h => h(App)
})
// expose the app, the router and the store. // note we are not mounting the app here, since bootstrapping will be // different depending on whether we are in a browser or on the server. return { app, router, store } } `
import first
and test
if(window) { Vue.use() }{
or create your component !
read the doc
I use jsdom, and it works , please checkout and try to put the code on your server.js
const { JSDOM } = require('jsdom');
const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>', { 'url': 'http://localhost:9028' });
if (typeof window === 'undefined') {
global.window = dom.window;
global.document = window.document;
global.navigator = window.navigator;
}
