When trying to lazy load components in my routes.js file, my CSS is not compiled.
When using an import statement at the top of the file, everything works as expected. There are no console errors or compile errors. I'm using Vue.js, Vue-Router, Laravel, and Laravel-Mix (all latest versions)
//Working (CSS is present)
import Home from '../../components/admin/Home';
//Not Working (No CSS is present)
function loadView(view) {
return () => import(/* webpackChunkName: "view-[request]" */ `../../components/admin/${view}.vue`)
}
//How I'm initializing the component
let routes = [
{
path: '/',
name: 'home',
component: loadView('Home'),
meta: {
requiresAuth: true
}
}]
//Laravel Mix Config
const mix = require('laravel-mix');
const webpack = require('webpack');
mix.js('resources/js/apps/registration/app.js', 'public/js/apps/registration/app.js')
.js('resources/js/apps/admin/app.js', 'public/js/apps/admin/app.js')
.js('resources/js/material-dashboard.js', 'public/js/material-dashboard.js')
.js('resources/js/material-dashboard-extras.js', 'public/js/material-dashboard-extras.js')
.sass('resources/sass/app.scss', 'public/css');
mix.webpackConfig({
plugins: [
/**
* Bug with moment.js library causing ./locale not to be found
* https://github.com/moment/moment/issues/2979
* Created an empty module running npm install --save empty-module and then doing the below
*/
new webpack.ContextReplacementPlugin(/\.\/locale$/, 'empty-module', false, /js$/),
/**
* Global objects are not getting recognized via require
* Set them up here
* global_name: path or module
*/
new webpack.ProvidePlugin({
/**
* There was an error with Popper not being defined due to Popper being included in Bootstrap
* https://github.com/FezVrasta/bootstrap-material-design/issues/1296
*/
'Popper': 'popper.js/dist/umd/popper'
})
]
});
Attached are screenshots of what I mean by CSS not being applied
How page looks with import
How page looks when trying to lazy load components in routes.js
You are not supposed to import the webpack chunk name, instead just reference the approriate path to the component like so:
//Not Working (No CSS is present)
function loadView(view) {
return () => import( `../../components/admin/${view}.vue`)
}
NB: not tested, hope it helps :)
Related
I have a bunch of sub-folders plus a few .vue components in the src/pages folder. With webpack I was able to get a list of the page paths and name with code like this:
export default require
.context("../pages", true, /^\.\/.*\.vue$/)
.keys()
.map(page => page.slice(2).replace(".vue", ""))
.filter(page => page !== "Index")
.map(page => ({
file: page,
title: createTitle(page),
path: slugify(kebabCase(page))
}));
Vite doesn't seem to support this. I tried const pages = import.meta.glob('../pages/*.vue') but this only works for files, not files inside sub-folders.
Any idea how I can achieve this with Vite?
I found a way. It's not perfect but not terrible either:
const pages = import.meta.glob('../pages/*.vue')
const folders = import.meta.glob('../pages/*/*.vue')
const both = {...pages, ...folders}
export default both
This is a refinement:
const pages = import.meta.glob('../pages/**/*.vue')
export default pages
I think you're looking for something like vite-plugin-pages :
installation :
npm install -D vite-plugin-pages
which requires vue-router to be installed :
npm install vue-router
Add to your vite.config.js:
import Pages from 'vite-plugin-pages'
export default {
plugins: [
// ...
Pages(),
],
}
Router config :
import { createRouter } from 'vue-router'
import routes from '~pages'
const router = createRouter({
// ...
routes,
})
There're also other plugin like unplugin-vue-components to resolve components and vite-plugin-vue-layouts to resolve layouts
My VueJS application is using a router and has a LoadingPage.vue component which is being used in the router as follows:
{
path: "/loading",
name: "loading",
component: () =>
import(
/* webpackChunkName: "loading" */
/* webpackPrefetch: false */
/* webpackMode: "lazy" */
"../views/LoadingPage.vue"
),
}
Upon visiting the /loading route, the component is being shown successfuly. However, I'm not seeing a separate chunk when I inspect the files request by the browser.
Here's a screenshot of the .js files that are being loaded:
I expected a loading.[hash].js file there, but it's missing.
What could be causing this problem? I'm using vue 2.6.14 and vue-router 3.5.1
I also haven't touched the vue.config.js file, it looks like this:
module.exports = {
configureWebpack: {
devtool: "source-map",
},
devServer: {
host: "localhost",
},
};
I encountered the same problem as well. I solved it but deleting extra import statement at the top of the file. Try to make sure you are not importing the same component twice.
My route : Route in index.js
Import statement in index.js: Import statement in index.js
Once i deleted all the duplicate component (Account etc) and run build, a separate chunk created : Admin chunk
Hope it can solve your problem as well.
In the Stencil docs section on framework integration with Vue it states the following:
In order to use the custom element library within the Vue app, the
application must be modified to define the custom elements and to
inform the Vue compiler which elements to ignore during compilation.
According to the same page this can be achieved by modifying the config of your Vue instance like this:
Vue.config.ignoredElements = [/test-\w*/];
This relates to Vue 2 however. With Vue 3 (which Ionic Vue uses) you have to use isCustomElement as stated here.
Regretably, I can’t for the life of me get Vue and Stencil to play nice. I have tried setting the config like this:
app.config.compilerOptions.isCustomElement = tag => /gc-\w*/.test(tag)
This causes Vue throw the following warning in the console:
[Vue warn]: The `compilerOptions` config option is only respected when using a build of Vue.js that includes the runtime compiler (aka "full build"). Since you are using the runtime-only build, `compilerOptions` must be passed to `#vue/compiler-dom` in the build setup instead.
- For vue-loader: pass it via vue-loader's `compilerOptions` loader option.
- For vue-cli: see https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-loader
- For vite: pass it via #vitejs/plugin-vue options. See https://github.com/vitejs/vite/tree/main/p
However, I have no idea how to implement any of the above suggestions using Ionic Vue. I have been messing around with chainWebpack in config.vue.js but without success so far.
Any help would be greatly appreciated.
I'm not an expert in Vue but here's how I did it:
Add the following to your ./vue.config.js (or create it if it doesn't exist):
/**
* #type {import('#vue/cli-service').ProjectOptions}
*/
module.exports = {
// ignore Stencil web components
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.tap(options => {
options.compilerOptions = {
...options.compilerOptions,
isCustomElement: tag => tag.startsWith('test-')
}
return options
})
},
}
This will instruct Vue to ignore the test-* components. Source: https://v3.vuejs.org/guide/web-components.html#skipping-component-resolution
Next, load the components in ./src/main.ts.
Import the Stencil project:
import { applyPolyfills, defineCustomElements } from 'test-components/loader';
Then replace createApp(App).use(router).mount('#app') with:
const app = createApp(App).use(router);
// Bind the custom elements to the window object
applyPolyfills().then(() => {
defineCustomElements();
});
app.mount('#app')
Source: https://stenciljs.com/docs/vue
Also, if anyone is using vite2+, just edit the vite.config.js accordingly:
import { fileURLToPath, URL } from 'url'
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue({
template: {
compilerOptions: {
isCustomElement: tag => tag.startsWith('test-') // ✅ Here
}
}
}) ],
resolve: {
alias: {
'#': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
I struggle to add a plugin in Nuxt.js. I have been looking to the doc and all kind of similar problems, but I got the same error: simpleParallax is not defined.
I tried different approach on all files
nuxt.config.js:
plugins: [
{src: '~/plugins/simple-parallax.js', mode:'client', ssr: false}
],
plugins/simple-parallax.js:
import Vue from 'vue';
import simpleParallax from 'simple-parallax-js';
Vue.use(new simpleParallax);
index.vue:
Export default {
plugins: ['#/plugins/simple-parallax.js'],
mounted() {
var image = document.getElementsByClassName('hero');
new simpleParallax(image, {
scale: 1.8
});
}
}
Error message:
ReferenceError: simpleParallax is not defined.
The best solution I found out so far is to register simpleParallax on the Vue prototype like so in a plugin nuxt file with the name simple-parallax.client.js:
import Vue from 'vue';
import simpleParallax from 'simple-parallax-js';
Vue.prototype.$simpleParallax = simpleParallax;
Also my nuxt.config.js file if anyone would like to verify that as well:
plugins: [
{src: '~/plugins/simple-parallax.client.js', mode: 'client', ssr: false}
],
I then have access to the plugin before instantiation in my case in the mounted life cycle of the primary or root component to grab the desired HTML elements and instantiate their individual parallax with the newly added global method this.$simpleParallax
For example I can then intiate a certain HTML element to have its parallax like so:
const someHTMLElement = document.querySelectorAll('.my-html-element');
const options = {...} // your desired parallax options
new this.$simpleParallax(someHTMLElement, options);
Actually you don't need to use plugin here.
Just import simpleParallax from 'simple-parallax-js' in your component and init it with your image in mounted hook.
index.vue:
import simpleParallax from 'simple-parallax-js'
export default {
...
mounted() {
// make sure this runs on client-side only
if (process.client) {
var image = document.getElementsByClassName('thumbnail')
new simpleParallax(image)
}
},
...
}
And don't forget to remove previously created plugin, it's redundant here.
I'm working on a vuejs project and we're trying to use external vue cli applications as libraries. In these libraries we want to be able to export a router config, which lazy loads the components within one of these modules. However when we compile this using the vue-cli-service into a library and it's got lazy chunk assets we cannot resolve them with webpack.
I have a feeling its something to do with the public path, or some simple configuration but i'm just stuck and banging my head against a wall at this stage with it.
https://github.com/EvanBurbidge/mono-repo-tester
Here's a simple overview of what we're doing
App1 -> main app, installs App2, imports { router } from 'app2'
App2 -> library, compiles to common js lib exports router config
The console output from app1
The router configuration from app2
The router importing app2 from app1
/* config.module.rule('js') */
{
test: /\.jsx?$/,
exclude: [
function () { /* omitted long function */ }
],
use: [
/* config.module.rule('js').use('cache-loader') */
{
loader: 'cache-loader',
options: {
cacheDirectory: '/Users/evan/test/node_modules/.cache/babel-loader',
cacheIdentifier: '39e7e586'
}
},
/* config.module.rule('js').use('babel-loader') */
{
loader: 'babel-loader'
}
]
},
I think I know what the problem is.
It appears that you're suffering from the fact that the default config of webpack bundled with VueJS does not support what you are trying to accomplish. In fact, it may very well be that Webpack does not support what you are trying to accomplish #2471 #6818 #7843.
When you compile app2 into UMD and try to use it within app1 by importing the UMD, the dynamic imports of app2 are not being resolved and are thus not copied over to the publicPath of app1. Since it is a dynamic import, compilation succeeds to the point where you can deploy the app. When you try to load the app however, it starts complaining that chunks are missing.
Here's one way to solve this problem:
app2/package.json
{
"name": "app2",
...
"main": "src/router.js"
}
app2/src/router.js
const Hey = () => import(/*webpackChunkName: 'app2.Hello.vue' */ './components/HelloWorld.vue')
export default [
{
path: '/app2',
component: Hey,
name: 'app2.hey'
}
]
app1/router.js
import app2Router from 'app2'
import Home from './views/Home.vue'
export default new Router([
mode: 'history',
...
routes: [
{
path: '/',
name: 'home',
component: Home
},
...app2Router
]
])
By marking the main or module of app2/package.json as router.js instead of the the UMD bundle, you are forcing app1 to build the whole dependency graph and include any dynamic import that is detected. This in turn causes the dependencies to be copied over properly.
You could also achieve the exact same results by using
import app2Router from 'app2/src/router'
Supposedly, this issue is now fixed in Webpack 5 https://github.com/webpack/webpack/issues/11127