DSGVO for VuetifyJS Webapplications

or if you want and should serve your application fonts and icons from your server.

Due to the german legal rights DSGVO you are not allowed to give personal data like the IP of your client to Google and the like without asking him/her.

In this case and/or if you want to serve your application fonts and icons from your server instead on depending on the cloud, you can follow the next steps.

The typical VuetifyJS Application includes the following lines in the index.html:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">

The first one references the fonts used in the application, the second one the icons.

So the first step is: Delete those lines.

Next we install them locally during installation from

https://www.npmjs.com/package/@fontsource/roboto
https://www.npmjs.com/package/@mdi/font

by using npm install

npm install @mdi/font -D
npm install @fontsource/roboto -D

After that the following entries can be found inside the package.json:

"devDependencies": {
    "@mdi/font": "^6.6.96",
    "@fontsource/roboto": "^4.5.5",

With that you can take the next step and add an import statement at the top of your main.js:

import '@fontsource/roboto'

The icons will be added to your plugin/vuetify.js:

import '@mdi/font/css/materialdesignicons.css'

and you are good to go, everything should work as expected.

I hope this helps you.