Skip to content

Instantly share code, notes, and snippets.

@kesor
Last active April 23, 2024 15:18
Show Gist options
  • Save kesor/241afec2eac00106cbd596da64ecbd0a to your computer and use it in GitHub Desktop.
Save kesor/241afec2eac00106cbd596da64ecbd0a to your computer and use it in GitHub Desktop.
Vue.js 3.x with ES6 modules in the browser using import-map
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
@import "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css";
@lnfel
Copy link

lnfel commented Sep 18, 2023

Is there a way for us to enable IDE (i.e. vscode) intellisense for importmaps? Been looking for related info but none have come up so far. It seems there is no way to enable intellisense with these kind of import at the moment.

I found this one but couldn't get it to work:
https://stackoverflow.com/questions/73346967/can-i-configure-something-in-vscode-to-get-javascript-intellisense-for-a-js-file

@kesor
Copy link
Author

kesor commented Sep 18, 2023

I made this snippet as an example for https://stackoverflow.com/questions/52612446/importing-a-package-in-es6-failed-to-resolve-module-specifier-vue/62282239#62282239

No idea if vscode has support for these, and how it might be called.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment