vuetify-loader | 📦 Webpack and Vite plugins | Plugin library

It appears that this is known issue with webpack 4 and older versions (I think it is fixed in version 5).

Basically in order webpack to be able to parse the problematic files it needs additional package: https://www.npmjs.com/package/@open-wc/webpack-import-meta-loader

Once I've installed the package I've included it in my vue webpack config via the vue.config.js file as follows:

You do not seem to have the files you build via vue in a folder that is served by GitHub Pages. Go to the repository settings in GitHub and choose "Pages". There you can switch the branch and the folder in the branch that should be served. Currently only "/" (root) or "/docs" are allowed. See the GitHub Pages Docs on this

For your use case, changing this to "/docs" and renaming your "dist" folder to "docs" after building your page / changing the output folder in your compiler should do the trick. Take note that it will take a few minutes for the new index.html to be served instead of the current Readme after changing this.

I'd not translate the texts in data() but instead only include the static translation keys there:

Have you tried a completely different jpg? Also, check if file extension is lowercase, always use .jpg instead of .JPG

edit: if u can, please, post the full error message...

edit2: the error is clear, you don't have a loader to process the image file.
First try to install file-loader, if that don't solve the problem, check your webpack.config, probably the section below is missing(or not including jpg):

I might have found the webpack config responsible for this. But i have no idea why it does what it does. Any idea ?

In webpack.prod.js :

To resolve this issue update the "passport" lib version in your package.json: from "passport": "^0.5.2", to "passport": "^0.4.0", so it's same as used in @nestjs/passport@8.0.1.

The automatic loading of global Vuetify variables requires using vuetify-loader instead of the full bundle of Vuetify (which you appear to be using in plugins/vuetify.js).

Your Vuetify setup should look similar to this:

This is accomplished with unplugin-vue-components, the Vite equivalent of vuetify-loader.

Configure Vite to use unplugin-vue-components with its Vuetify resolver, which automatically imports the Vuetify components and styles upon use (like vuetify-loader):

You need to install vue-i18n-loader as mentioned in official docs :

You need to install vue-loader and vue-i18n-loader to use custom blocks. While vue-loader (opens new window)most likely is already used in your project if you are working with single file components, you must install vue-i18n-loader (opens new window)additionally:
npm i --save-dev @intlify/vue-i18n-loader