vuetify2 installation problem and css/scss obligatory

Question

I tried to add Vuetify to my project in several ways, but it caused a lot of errors (vue cli, vue ui, with according to doc using vuetify plugin file and specific webpack configuration). So in the end, I decided to do it in a more traditional way. But then it looks like I don't use all styles. I can't use justify="center" with v-row (there are no style for .justify-center), container full-height don't have full height and v-text-field with outlined looks bad (label should be on the left, but it's on the right and then you click on it, its move top to bad position)

So maybe someone helps me add it correctly? Maybe I need some additional loaders or import more CSS styles. Which of them is obligatory?

How I did it?

1) npm install vuetify --save

2) in index.js imported vuetify and vuetify.min.css

import Vue from 'vue';
import App from './src/App.vue';
import router from './router';
import Vuetify from 'vuetify';


import './style.scss';
import './node_modules/bootstrap/dist/css/bootstrap-grid.css';
import './node_modules/vuetify/dist/vuetify.min.css';
import 'material-design-icons-iconfont/dist/material-design-icons.css'

Vue.use(Vuetify);

new Vue({
    el: '#app',
    router,
    render: h => h(App)
})

3) simple webpack configuration

const path = require('path');
const webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    devtool: "source-map",
    entry: './index.js',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['@babel/preset-env']
                }
            },
            {
                test: /\.vue$/,
                exclude: /node_modules/,
                loader: 'vue-loader'
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.s[ac]ss$/i,
                loaders: [
                  'style-loader',
                  'css-loader',
                  'sass-loader',
                ],
            },
            {
                test: /\.(woff2?|eot|ttf|otf)$/,
                loader: 'file-loader',
                options: {
                    limit: 10000,
                    name: '[name].[hash:7].[ext]'
                }
             }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
      ]
};

I have no errors. Only problem is that vuetify components are not properly rendered.

Example:

outline input should look that:

but it looks that:

@Aragon S, then you for your answer. I edited my post adding two picture, that show one, but the bigest of the problems. — TomH
AFAIK, you should include more or all of boostrap if you want boostrap styles, you are only including bootstrap-grid — birdspider

Luca Rossi Luca Rossi · Accepted Answer · 2019-11-28T15:07:51

This is what must be on App.js to include Vuetify:

import Vuetify from 'vuetify'
import colors from 'vuetify/lib/util/colors'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify);

new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    router,
    render: h => h(App)
})

This way will work

vuetify2 installation problem and css/scss obligatory

1 Answers