CODEWITHSUNDEEP
vue.jscloudflare-workersvue-ssr
user1885099
user1885099

Reputation: 150

run vue3 ssr on cloudflare workers

I'm trying to run a vue ssr app on cloudflare workers.

I generated a new project using wrangler generate test

I installed vue using npm install vue@next and npm install @vue/server-renderer

I edited the index.js file like this:

const { createSSRApp } = require('vue')
const { renderToString } = require('@vue/server-renderer')

const app = createSSRApp({
  data: () => ({ msg: 'hello' }),
  template: `<div>{{ msg }}</div>`
})

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const html = await renderToString(app)
  return new Response(html, {status: 200})
}

I then used wrangler dev to test it, but when I access the page I get this error:

ReferenceError: __VUE_PROD_DEVTOOLS__ is not defined
    at Module.<anonymous> (worker.js:8:104768)
    at n (worker.js:1:110)
    at Object.<anonymous> (worker.js:8:104943)
    at n (worker.js:1:110)
    at worker.js:1:902
    at worker.js:1:912

Any help or guidance is appreciated

Upvotes: 3

Views: 796

Answers (1)

Meeraj Ahmed
Meeraj Ahmed

Reputation: 71

I faced similar issue and was able to fix it by defining a global constant (VUE_PROD_DEVTOOLS = false) during compile time.

Here is how my webpack prod config looks like:

const webpack = require('webpack');
const { merge } = require("webpack-merge");
const webpackCommon = require("./webpack.common");

const prodConfig = {
    mode: 'production',
    plugins: [
        new webpack.DefinePlugin({
            __VUE_PROD_DEVTOOLS__: JSON.stringify(false)
          }),
    ]
};

module.exports = merge(webpackCommon, prodConfig);

Upvotes: 0

Related Questions