How to use Vuetify-predefine layouts inside laravel 5.6?

Question

I have tried to use Vuetify as my front-end framework inside my laravel project. I'm using yarn to install vue and vuetify.

Then I tried to use vuetify's predefined layout as my layout component. At my first attempt I succeeded in configuring it. But when I try to customize it as per my requirements it gives errors when I build the code using yarn run dev?

Here is my app.js file.

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');
import Notification from 'vue-notification';
import VueProgressBar from 'vue-progressbar';
import VueRouter from 'vue-router';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
import 'material-design-icons-iconfont/dist/material-design-icons.css'


Vue.use(Notification);
Vue.use(VueRouter);

const router = new VueRouter({
    mode: 'history'
});
const options = {
    color: '#16e9ff',
    failedColor: '#ff6761',
    thickness: '4px',
    transition: {
        speed: '0.2s',
        opacity: '0.6s',
        termination: 300
    },
    autoRevert: true,
    location: 'top',
    inverse: false
};

Vue.use(VueProgressBar, options);
Vue.use(Vuetify, {
    theme: {
        "primary": "#00bcd4",
        "secondary": "#424242",
        "accent": "#82B1FF",
        "error": "#FF5252",
        "info": "#2196F3",
        "success": "#4CAF50",
        "warning": "#FFC107"
    }
});


/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('home-component', require('./components/HomeComponent.vue'));
Vue.component('layout',require('./components/layout/Layout.vue'));

const app = new Vue({
    el: '#app',
    router,
});

Here is my app.sass file.

// Fonts
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");

// Variables
@import "variables";

// Bootstrap
@import '~bootstrap/scss/bootstrap';


.navbar-laravel {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

Here is my webpack.mix.js file

let mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css');

And lastly here is what I got.

ERROR in ./node_modules/vuetify/src/stylus/components/_tooltips.styl
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @import '../bootstrap'
| 
| .v-tooltip
 @ ./node_modules/vuetify/lib/components/VTooltip/VTooltip.js 3:0-55
 @ ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":["> 2%"],"uglify":true}}]],"plugins":["transform-object-rest-spread
",["transform-runtime",{"polyfill":false,"helpers":false}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/layout/Layout.vue
 @ ./resources/assets/js/components/layout/Layout.vue
 @ ./resources/assets/js/app.js
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Yachitha Sandaruwan\AppData\Roaming
pm-cache\_logs\2018-10-24T15_00_36_231Z-debug.log
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I need to know what's wrong with my configurations?
If anyone can explain about loaders (css-loader, vue-loader, sass-loader) that may be helpful?

If anyone uses vuetify pre-defined layouts with laravel please help me to solve this.

How to use Vuetify-predefine layouts inside laravel 5.6?

0 Answers