thinkofher/component-app.js

## component-app.js
import { defineAsyncComponent } from 'vue'

const Content = defineAsyncComponent(() => import('./component-content.js'))

export default {
  name: 'App',
  components: { Content },
  template: /*html*/`
    <Content />
  `
}

## component-content.js
export default {
  name: 'Content',
  template: /*html*/`
    <div class="content">
      <p>Hello world!</p>
    </div>
  `
}

## docker-compose.yml
version: "3.7"

services:

  nginx:
    image: nginx
    init: true
    restart: on-failure
    ports:
    - 8765:80
    volumes:
    - .:/usr/share/nginx/html:cached,ro

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,minimal-ui,user-scalable=no">
    <link rel="stylesheet" href="/style.css" />
  </head>
  <body>
    <div id="app"></div>
    <!-- https://wicg.github.io/import-maps/#import-map -->
    <script type="importmap">
      {
        "imports": {
          "vue":          "https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.0-beta.15/vue.esm-browser.js",
          "vue-router":   "https://cdnjs.cloudflare.com/ajax/libs/vue-router/4.0.0-alpha.12/vue-router.esm.js",
          "vuex":         "https://cdnjs.cloudflare.com/ajax/libs/vuex/4.0.0-beta.2/vuex.esm-browser.js"
        }
      }
    </script>
    <script type="module" src="/main.js"></script>
  </body>
</html>

## main.js
import { createApp } from 'vue'
import router from './router.js'
import store from './store.js'

export const vue = createApp({
  template: /*html*/`<router-view />`
})

vue.use(store)
vue.use(router)

if (document.getElementById('app')) {
  vue.mount('#app')
}

## router.js
import { defineAsyncComponent } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'

const App = defineAsyncComponent(() => import('./component-app.js'))

const router = createRouter({
  history: createWebHistory(),
  routes: [{
    path: '/',
    components: {
      default: App,
    },
  }]
})

export default router

## store.js
window.process = { env: {} } /* help vuex.esm cope with living in browser */

import { createStore } from 'vuex'

const state = {
}

const getters = {
}

const actions = {
}

const mutations = {
}

const store = createStore({
  state,
  getters,
  actions,
  mutations,
})

export default store

## style.css
@import "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css";
	import { defineAsyncComponent } from 'vue'

	const Content = defineAsyncComponent(() => import('./component-content.js'))

	export default {
	name: 'App',
	components: { Content },
	template: /html/`
	<Content />
	`
	}
	export default {
	name: 'Content',
	template: /html/`
	<div class="content">
	<p>Hello world!</p>
	</div>
	`
	}
	version: "3.7"

	services:

	nginx:
	image: nginx
	init: true
	restart: on-failure
	ports:
	- 8765:80
	volumes:
	- .:/usr/share/nginx/html:cached,ro
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,minimal-ui,user-scalable=no">
	<link rel="stylesheet" href="/style.css" />
	</head>
	<body>
	<div id="app"></div>
	<!-- https://wicg.github.io/import-maps/#import-map -->
	<script type="importmap">
	{
	"imports": {
	"vue": "https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.0-beta.15/vue.esm-browser.js",
	"vue-router": "https://cdnjs.cloudflare.com/ajax/libs/vue-router/4.0.0-alpha.12/vue-router.esm.js",
	"vuex": "https://cdnjs.cloudflare.com/ajax/libs/vuex/4.0.0-beta.2/vuex.esm-browser.js"
	}
	}
	</script>
	<script type="module" src="/main.js"></script>
	</body>
	</html>
	import { createApp } from 'vue'
	import router from './router.js'
	import store from './store.js'

	export const vue = createApp({
	template: /html/`<router-view />`
	})

	vue.use(store)
	vue.use(router)

	if (document.getElementById('app')) {
	vue.mount('#app')
	}
	import { defineAsyncComponent } from 'vue'
	import { createRouter, createWebHistory } from 'vue-router'

	const App = defineAsyncComponent(() => import('./component-app.js'))

	const router = createRouter({
	history: createWebHistory(),
	routes: [{
	path: '/',
	components: {
	default: App,
	},
	}]
	})

	export default router
	window.process = { env: {} } /* help vuex.esm cope with living in browser */

	import { createStore } from 'vuex'

	const state = {
	}

	const getters = {
	}

	const actions = {
	}

	const mutations = {
	}

	const store = createStore({
	state,
	getters,
	actions,
	mutations,
	})

	export default store