Nuxt Fatal Error Error: [VuetifyLoaderPlugin Error] No matching rule for vue-loader found - build

Question

After running npm run build, I get an error: Error: [VuetifyLoaderPlugin Error] No matching rule for vue-loader found.Make sure there is at least one root-level rule that uses vue-loader and VuetifyLoaderPlugin is applied after VueLoaderPlugin.
package.json
{
"name": "client",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"dependencies": {
"#nuxtjs/axios": "^5.13.6",
"core-js": "^3.15.1",
"dotenv": "^10.0.0",
"nuxt": "^2.15.7",
"nuxt-i18n": "^6.27.3",
"nuxt-mail": "^3.0.10",
"vuetify": "^2.5.5"
},
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.15.3",
"#fortawesome/fontawesome-svg-core": "^1.2.35",
"#fortawesome/free-brands-svg-icons": "^5.15.3",
"#fortawesome/free-solid-svg-icons": "^5.15.3",
"#fortawesome/vue-fontawesome": "^2.0.2",
"#mdi/font": "^5.9.55",
"#nuxtjs/fontawesome": "^1.1.2",
"#nuxtjs/vuetify": "^1.12.1",
"eslint-config-prettier": "^8.3.0",
"font-awesome": "^4.7.0",
"material-design-icons-iconfont": "^6.1.0",
"prettier": "^2.3.2"
}
}
Here is my config nuxt.config.js file:
import colors from 'vuetify/es5/util/colors'
import i18n from './config/i18n'
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
titleTemplate: '%s - client',
title: 'client',
htmlAttrs: {
lang: 'en'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
{ name: 'format-detection', content: 'telephone=no' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: [
],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
[
'nuxt-i18n',
{
vueI18nLoader: true,
defaultLocale: 'hr',
locales: [
{
code: 'en',
name: 'Eng'
},
{
code: 'hr',
name: 'Hrv'
}
],
vueI18n: i18n
}
],
'#nuxtjs/vuetify',
'#nuxtjs/fontawesome'
],
fontawesome: {
icons: {
solid: true,
brands: true
}
},
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
// https://go.nuxtjs.dev/axios
'#nuxtjs/axios',
'#nuxtjs/vuetify',
'nuxt-i18n',
['nuxt-mail', {
message: {
to: 'mislav0508#hotmail.com',
},
smtp: {
host: "smtp-mail.outlook.com",
port: 587,
secure: false, // true for 465, false for other ports
auth: {
user: "mislav0508#hotmail.com",
pass: process.env.EMAIL_PASS,
},
tls: {
rejectUnauthorized:false
}
},
}],
],
// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: {},
i18n: {
i18n: {
locales: ['hr', 'en'],
defaultLocale: 'hr',
vueI18n: {
fallbackLocale: 'hr',
messages: {
hr: {
welcome: 'Dobrodošli'
},
en: {
welcome: 'Welcome'
}
}
}
}
},
// Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
vuetify: {
customVariables: ['~/assets/variables.scss'],
theme: {
dark: false,
themes: {
dark: {
primary: colors.blue.darken2,
accent: colors.grey.darken3,
secondary: colors.amber.darken3,
info: colors.teal.lighten1,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3
}
}
}
},
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
}
}
I've tried installing vuetify-loader and vue-loader and adding them to the nuxt.config.js file. However after that I get another error:
TypeError: loaderContext.emitError is not a function
Please help.