According to a post I’ve read:
Babel’s plugin-syntax-dynamic-import is essential to be able to use lazy loading. Otherwise webpack will not compile this syntax const AppHome= () => import("#/components/AppHome");
In addition, I can’t see Webpack option when I start a new project using vue-cli. I see only Babel.
Does it mean that Babel is mandatory if I want to use Webpack in my Vue project?
Is there any alternative if I want to use lazy loading and Webpack?
I don't think I understand something, if you use vue-cli you have built-in webpack, babel, lazy-loading components and many other libraries.
I checked vue-cli 2.5.2 as the first edge code, and everything works as it should loads chunks.
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
// lazy load pages
const lazyLoad = view => () =>
import ( /* webpackChunkName: "chunk-" */ `#/pages/${view}`);
export default new Router({
mode: 'history',
routes: [{
path: '/',
name: 'Home',
component: lazyLoad('Home')
},
{
path: '/form',
name: 'Form',
component: lazyLoad('Form')
}
]
});
Related
I'm setting up what is going to be a large system, so I want to have decentralised router.js files for every module. Each of them would have routes arrays declarations that would be pushed to the main routes array.
So for now I have a kind of root of routes file, which have the VueRouter instances and settings, and it imports the first level of route.js files to build the routes array.
main routes.js file
import DashboardRoutes from './views/dashboard/routes'
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{// Root public site
path: '/',
component: () => import('./views/pages/Index'),
children: PagesRoutes
},
name: 'page_error',
path: '*',
component: () => import('./views/error/Error')
}
].concat(
DashboardRoutes
)
})
module (first level) routes.js file
import InventoryRoutes from './inventarios/routes'
const routes = {
path: '/panel',
component: () => import('./Index'), // This Index has a layout with a router-view in it
children: [
// Inicio del panel
{
name: 'dashboard',
path: '',
component: () => import('./Dashboard'),
}
].concat(
InventariosRoutes
)
}
export default routes
Components (second level) routes.js file
const routes = {
path: 'inventario',
name: 'panel_inventario',
component: { template: '<router-view/>' },
children: [
// Productos y servicios
{
name: 'panel_inventarios_productos-servicios',
path: 'productos-servicios',
component: () => import('./productos-servicios/ProductosServiciosHome'),
},
]
}
export default routes
In the components tree of vue-tools I see an AnnonymousComponent in the place where my children's router-view should be.
Update
I just create an external component to name it and check if it's being rendered like this
Components (second level) routes.js file
const loader = {
template: `
<div class="InventarioLoader">
<router-view></router-view>
</div>
`,
name: 'InventarioLoader'
}
const routes = {
path: 'inventario',
name: 'panel_inventario',
component: loader,
children: [
// children go here
]
}
Now I see my InventarioLoader component, but I still don't see my children components rendered in it
Update
I see this error on the console
You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
By default, Vue does not compile string templates. This is for performance reasons.
Since the runtime-only builds are roughly 30% lighter-weight than their full-build counterparts, you should use it whenever you can
See https://v2.vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
Either create a real single-file component or use a render function
import Vue from 'vue'
const RouterView = Vue.component('router-view')
const loader = {
name: 'InventarioLoader',
render (createElement) {
return createElement(RouterView)
}
}
Apparently now you can't point a route to a inline component like {template:'<router-view/>} and my solution was to create a loader component with that template and use it on the parent route
I'm new to vue and building my first app. I was following a tutorial and noticed a way to lazy load in the router:
import Vue from 'vue'
import Router from 'vue-router'
import MainContent from '#/layout/main-content.vue'
import Home from '#/views/home.vue'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
component: MainContent,
children: [
{
path: ''
//This works
component: Home
//This doesn't work
component: () => import('#/views/home.vue')
},
{
path: 'home'
//This works
component: Home
//This doesn't work
component: () => import('#/views/home.vue')
}
]
}
]
})
You can see in the above example, I'm showing the synchronous way and the asynchronous way. There are two paths to the home component because I need to be able to support the root '/' and the '/home' as the default. That's not the issue because it works the synchronous way (plus, I tried it with other child routes).
The strange thing is when I lazy load, the page doesn't refresh (hot load) until I inspect using the browser tool. Even when I force a refresh in the browser, it doesn't appear. When I open the inspector, then I see the home component in the browser. Why would I only see the Home component when I open the inspector?
When learning the Vue Router on https://router.vuejs.org/, the section on nested routes shows how to declare children routes.
But the only way it shows it being possible is declaring all of them in the single Router file. So if i were to build a somewhat large app index consisting of several independent apps, and i wanted each of those apps to have routing and links pointing to whatever pages they use, then it would be inconsistent and hard to maintain if it were mandated that those routes were all to be declared in the main router config. I guess i'm looking for a more separation-of-concerns approach.
Let's say if one of my apps was a Todo App whose main component is defined in TodoApp.vue, the kind of thing i'm hoping for is that i could define all the routes for this Todo app in its .vue file, and then the main router config would import it, and treat those routes as children of the main /todo route, assuming that /todo is the path to the Todo App.
For example, let's say this is an excerpt of my Router definition, showing that Todo is one of my apps that has some subnavigation going on:
const router = new Router({
base: process.env.BASE_URL,
routes: [
{
path: '/todo',
name: 'TodoApp',
component: Todo
children: [{
path: 'create-task',
component: TodoCreateTask,
},{
path: 'edit-tasks',
component: TodoEditTask,
},{
path: 'create-task',
component: TodoCreateTask,
}]
]
});
I am wondering if it would be possible to remove the children part from this declaration, move it into the Todo component file, and then do some kind of an import here?
You can simply store children routes in a separate file as a regular array, for example:
subroutes.js
// import the components that are being referenced
export default [{
path: 'create-task',
component: TodoCreateTask,
},{
path: 'edit-tasks',
component: TodoEditTask,
},{
path: 'create-task',
component: TodoCreateTask,
}]
App.vue
import subroutes from './subroutes';
const router = new Router({
base: process.env.BASE_URL,
routes: [
{
path: '/todo',
name: 'TodoApp',
component: Todo,
children: subroutes,
}
]
});
I am developing a web page in vuejs and I am using webpack 4 and babel 6 for compiling the assets
When i put something like... route('home', '/', () => import('../pages/home.vue')) the compiler says me Support for the experimental syntax 'dynamicImport' isn't currently enabled and I cant use that syntax
I need help, thanks
This is my package.json:
https://gist.github.com/sarmanulco/fd2415c2b81db3df457302c61d77f197
To use vue-router with lazy-loading component:
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'homepage',
component: () => import('#/pages/Home.vue') //lazy loading
},
]
})
Make sure you take a look at vue-router docs
To use the dynamicImport add a .babelrc file (where the package.json is located)
Here is the content of the .babelrc:
{
"plugins": ["#babel/plugin-syntax-dynamic-import"]
}
My error:
You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
my main.js file:
import Vue from 'vue'
// import App from './App.vue'
import VueRouter from 'vue-router'
import Search from './components/Search'
import Index from './components/Index'
Vue.config.productionTip = false;
const routes = [
{path: '/', component: Index},
{path: '/Search', component: Search}
];
const router = new VueRouter({
routes
});
new Vue({
router
}).$mount('#app');
my components are mostly identical, looking like this:
<template>
index
</template>
<script>
export default {
name: "index"
}
</script>
<style scoped>
</style>
I am sure I am doing something wrong that is very simple, but I have spent a few fruitless hours attempting to find a solution and I haven't found one.
I used the default vue-cli create, and am unsure how to make this work. I have tried to resolve the dist version of vue as has been recommended, but I haven't found any way to actually do that.
Perhaps I am writing my components incorrectly? Any help would be greatly appreciated. Thank you very much