distributed-vue-applications-loading-components-via-http
distributed-vue-applications-loading-components-via-http copied to clipboard
maoberlehner
Can be used in vue3
I got working with [email protected] with following steps:
Add webpack configuration:
// vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
// Add this
configureWebpack: config => {
config.externals = { vue: 'Vue' }
}
})
and then in index file
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
// Add this line
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
@annlumia Hi
That looks like you got it working with Vue 3, I'm trying to do everything same way (^3.2.37) and component downloads but not renders ever.
I have warning [Vue warn]: Invalid VNode type: undefined (undefined) if import component like this:
const MyComponent = () => externalComponent('[http://localhost:8080/MyComponent.b451c19a4e085013.umd.min.js’](http://localhost:8080/MyComponent.b451c19a4e085013.umd.min.js%E2%80%99))
or
I got [Vue warn]: Async component loader resolved to undefined. If you are using retry(), make sure to return its return value. when import async-way:
const MyComponent = defineAsyncComponent(() => externalComponent('http://localhost:8080/MyComponent.b451c19a4e085013.umd.min.js'))
I've tried yours code, but no difference at all. No new warnings or errors either. May be you can help where to look for?
regards, --Sofya :)
@turtle-hobbit hai,
Sorry if my explanation is not clear. I've created a repository for a sample project I made, it might be easier.