Skip to content

Instantly share code, notes, and snippets.

@dannychi

dannychi/component-app.js

Forked from kesor/component-app.js
Created July 18, 2022 05:58
Show Gist options
  • Save dannychi/bbcf99874e47f6d91bf5e9d47dad19c1 to your computer and use it in GitHub Desktop.
Save dannychi/bbcf99874e47f6d91bf5e9d47dad19c1 to your computer and use it in GitHub Desktop.
Download ZIP
Vue.js 3.x with ES6 modules in the browser using import-map
Raw
component-app.js
import { defineAsyncComponent } from 'vue'
const Content = defineAsyncComponent(() => import('./component-content.js'))
export default {
name: 'App',
components: { Content },
template: /*html*/`
<Content />
`
}
Raw
component-content.js
export default {
name: 'Content',
template: /*html*/`
<div class="content">
<p>Hello world!</p>
</div>
`
}
Raw
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
Raw
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>
Raw
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')
}
Raw
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
Raw
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
Raw
style.css
@import "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css";
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment