wrong order of dependencies created in main.js when using fontawesome5 in conjunction with vuetify

[num-lock]

Version

3.8.3

Environment info

  System:
    OS: Windows 10
    CPU: (8) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
  Binaries:
    Node: 12.4.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.16.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: Not Found

Steps to reproduce

vue create yourapp, cd yourapp, vue add vuetify and chose fontawesome5 instead of Material Icons in the dialog and also chose to include it directly as dependency (offline/electron-like applications)

Requires will be in wrong order in main.js.

What is expected?

import Vue from 'vue';
import '@fortawesome/fontawesome-free/css/all.css';
import './plugins/vuetify';
import App from './App.vue';
import router from './router';
import store from './store';
import 'roboto-fontface/css/roboto/roboto-fontface.css';

What is actually happening?

import Vue from 'vue';
import './plugins/vuetify';
import App from './App.vue';
import router from './router';
import store from './store';
import 'roboto-fontface/css/roboto/roboto-fontface.css';
import '@fortawesome/fontawesome-free/css/all.css';

---

Related to https://github.com/vuetifyjs/vuetify/issues/7516

[haoqunjiang]

It's not a bug in Vue CLI. It's just how the vuetify plugin's written. https://github.com/vuetifyjs/vue-cli-plugin-vuetify/blob/5985630/generator/index.js

Line 13 imports './plugins/vuetify', which transitively imports vuetify.min.css. Line 15 imports the two iconfonts.

[num-lock]

Ok, so how should this be handled then? The same is true for other dependencies like babel-polyfill, too. See https://github.com/vuetifyjs/vuetify/issues/4997 where the problem is basically the same, since babel-polyfill needs to be required as the very first dependency, even before vue.

[haoqunjiang]

Both issues should be taken care of by the plugin author. Please open the issue in the plugin repository.