Currently, I am undertaking a project using Nuxt.js and have set up a Docker image to manage all aspects of it. Additionally, I am looking to integrate MDBVue as a CSS library into my project. After some research, I learned that in order to utilize this library, I need to include it as a plugin and reference it within my nuxt.config.js file.
Below is a snippet of how my configuration file looks:
module.exports = {
head: {
title: 'skfe',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Nuxt.js project' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
loading: { color: '#3B8070' },
css: [
{ src: "bootstrap-css-only/css/bootstrap.min.css" },
{ src: "mdbvue/build/css/mdb.css" }
],
build: {
extend (config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
}
}
Although the CSS classes are functioning correctly, I am encountering an issue with VSCode where autocompletion does not work for the class names. I find myself having to input the complete class names manually. Is this typical behavior or is there a way to enable IntelliSense in my Vue files?