Nuxt js (vue js) Disabled default head links-CodePudding

I'm creating a system and I'm using the vue-nuxt framework for the frontend of my application.. so far it´s a wonderfull js framework but I had a issue maybe someone can help me

this is my nuxt.config.js file

export default {
  head: {
      titleTemplate: '%s',
      title: '..:: System Name ::..',
      htmlAttrs: {
        lang: 'en'
      },
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { hid: 'description', name: 'description', content: '' }
      ],
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/logo.svg'}
      ]
    },
  plugins: ['~/plugins/axios',],
  components: true,
  buildModules: ['@nuxtjs/vuetify',],
  modules: ['@nuxtjs/axios', '@nuxtjs/auth'],
  auth: {
      redirect: {
        login: '/auth/login',
        home: '/',
        logout: '/auth/login'
      },
      strategies: {
        local: {
          endpoints: {
            login: { url: 'user/login', method: 'post', propertyName: 'token' },
            user: { url: 'user/user-info', method: 'get', propertyName: 'data' },
            logout: false,
          }
        }
      }
    },
  router: {middleware: ['auth']},
  axios: {baseURL: 'http://apisbackend.url.com'},
  vuetify: {
    customVariables: ['~/assets/vars.scss'],
    icons: {
      iconfont: 'mdi',
    },
    theme: {
      dark: false,
      themes: {
        light: {
          primary: "#558b2f",
          accent: "#cfd8dc",
          secondary: "#fff176",
          info: "#33b5e5",
          warning: "#ffbb33",
          error: "#ff4444",
          success: "#00C851"
        }
      }
    }
  },
  build: {
  }
}

How you can see I do not have any external url in my head configuration but when I render in develop mode the navegathor still tried to get external files like:

https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css

This appear inside my html->head code

<!Doctype html>
<html>
  <head>
     [...]
     <link data-n-head="ssr" rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css family=Roboto:100,300,400,500,700,900&amp;display=swap">
     <link data-n-head="ssr" rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
     [...]
  </head>
  <body>
     [...]
  </body>
</html>

In the views or components develop by me I dont have any aditional external url configuration

I need some help to remove this external links from my system

thanks in advance

CodePudding user response：

@nuxtjs/vuetify automatically adds the Roboto font and Material Design icons to <head>.

You can disable that by setting defaultAssets to false:

// nuxt.config.js
export default {
  // Option 1: Build module options
  buildModules: [
     ['@nuxtjs/vuetify', { defaultAssets: false }],
  ],

  // Option 2: top-level options
  buildModules: ['@nuxtjs/vuetify'],
  vuetify: { defaultAssets: false }
}

demo

However, you'll need to manually setup the font/icons yourself if you disable the default assets.

CodePudding user response：

Thank you very much it did not work but it gave me new ideas on how to solve it here I put the final solution that I found... change this on my nuxt.config.js

export default {
  vuetify: {
    defaultAssets: false,
    treeShake: true,
    [...]
  }
}