I am very new to vue. I know that this one is easy with vue-cli but I need to learn this first without using the node. I was making many template files and pages in different js files. Suddenly it hit my mind that what if a lot of file is requested and downloaded? What I am trying to do is I am trying to fuse route and async component loading together for loading different pages when they are called. Is there a way to do this? This is the code that I tried for my initial project.
<html>
<head>
<script src="vue.js"></script>
<script src="vue-route.js"></script>
<script src="axios.min.js"></script>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<router-link to="/">Go to Home</router-link>
<router-link to="/about">Go to About</router-link>
</p>
<router-view></router-view>
</div>
<script>
//axios.get("https://shohanlab.com")
const Home = { template: '<div>Home</div>' }
const AsyncComp =
() =>
new Promise((resolve, reject) => {
resolve({
template: About
})
})
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: AsyncComp },
]
const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes, // short for `routes: routes`
})
const app =Vue.createApp({})
app.use(router)
app.mount('#app')
</script>
</body>
</html>
As we can see in the code that The About.js is called even before I call it. In this way the page size will be very big.
You can lazily load views as follows:
const routes = [
{
path: '/',
name: 'Dashboard',
component: () => import('../views/Dashboard.vue')
}
]
See the official docs for more info
Vue is primarily intended to be used with Vue CLI or other Node setup with a build step. The documentation and virtually all examples cover this scenario and assume that .vue SFC are used. It's still possible to use Vue 3 with vanilla JavaScript but this way lacks the documentation, features and a lot of third-party Vue libraries that cannot be used without being built.
It's possible to achieve this with lazy loading (as another answer noted). Native ES modules can be used for the same purpose to avoid a build step. Entry point needs to be a module either.
A demo:
index.html
<div id="app">
<h1>Hello App!</h1>
<p>
<router-link to="/">Go to Home</router-link>
<router-link to="/about">Go to About</router-link>
</p>
<router-view></router-view>
</div>
<script type="module" src="script.js"></script>
about.js
export default { template: '<div>About</div>' }
script.js
const routes = [
{ path: '/', component: { template: '<div>Home</div>' } },
{ path: '/about', component: () => import('./about.js') },
]
const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes,
})
const app =Vue.createApp({})
app.use(router)
app.mount('#app')