Laravel9, Vue2 & Vuetify basic installation with npm
Published: 2022-06-24 11:51:44

- Run the following in order to install Laravel & Vue dependencies:

`composer create-project --prefer-dist laravel/laravel:^9.* laravuetify`

`composer require laravel/ui`

`php artisan ui vue`

`npm install vue-router vue-axios`

`npm install`

`npm run dev`

If you are getting the following error:
`1 WARNING in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)`

Run the following to remove the error:
`npm install autoprefixer@10.4.5 --save-exact`

Now npm run watch should give a successful build message

- Install vue, sass and vuetify:
`npm install vuetify
npm install sass@~1.32 sass-loader deepmerge -D`

- Go to webpack.mix.js and overwrite:

```
mix.override(config => {
    config.modules.rules.push({
        test: /\.s(c|a)ss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            // Requires sass-loader@^7.0.0
            options: {
              implementation: require('sass'),
              indentedSyntax: true // optional
            },
            // Requires >= sass-loader@^8.0.0
            options: {
              implementation: require('sass'),
              sassOptions: {
                indentedSyntax: true // optional
              },
            },
          },
        ],
    })
})
```


- Go and create this file after creating the required folders:
```
//resources/js/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)
```

- Lastly append the following lines to app.js:
```
//resources/js/app/js
import Vue from 'vue'
import vuetify from './plugins/vuetify' // path to vuetify export

new Vue({
  vuetify,
}).$mount('#app')
```

- Finally go to resources/views and overwrite the welcome.blade.php with the following to test vuetify:

```
<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
        <v-main>
            <v-container>Hello world</v-container>
        </v-main>

        <v-alert
        border="left"
        color="indigo"
        dark
        >
        I'm an alert from Vuetify with a border left type info
        </v-alert>

        <v-alert
            border="right"
            color="blue"
            dense
            dismissible
            elevation="16"
            icon="Icon here"
            outlined
            prominent
            shaped
            text
            type="success"
        ></v-alert>

    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
    })
  </script>
</body>
</html>
```

- Run the laravel server and head to http://localhost:8000/
- Upon seeing the below page we can acknowledge that vuetify has been installed properly
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ub1vemt5vsfyflemzlp0.png)