run vue3 ssr on cloudflare workers

Question

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

score 0 · Answer 1 · edited Mar 01 '21 at 11:16

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);

run vue3 ssr on cloudflare workers

1 Answers1