Metronic Documentation

This is Metronic 7 documentation!

Upon purchase you can get Metronic 7 version from our Github Repository.

The new Metronic 8 is now available with the most advanced Bootstrap 5, VueJS, React and Laravel foundation with a solid light and dark mode design system, extensive utility classes and custom made in-house components.

View Metronic 8 documentation

To use most of the Metronic build tools, Node.js LTS version is required. Version 14.x LTS is recommended. Some of the plugins and framework in Metronic v7 does not support the latest Node.js version. https://nodejs.org/en/

Metronic v7 Vue and Laravel integration

Create Laravel new project

In the beginning we need to create Laravel+Vue project (in this example, we'll be creating a project named vue_laravel) by running this command:

composer create-project --prefer-dist laravel/laravel vue_laravel

Navigate to the newly created folder with this command

cd vue_laravel

Install dependencies

Now we need to add all needed dependencies into package.json, we can just copy the dependencies from theme/vue/demo1/package.json and paste it into the your new vue_laravel package.json

Also add devDependencies which existed inside the new vue_laravel package.json


"cross-env": "^7.0",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.19",
"axios": "^0.19",

When dependencies are added we can install them by running command:

npm install

Prepare resource files

Now we need to copy and paste the images folder from /theme/vue/demo1/public/media and paste it into our project's public folder.

Also we need to add all templates and source scss/js files into our laravel project. We can also copy the src folder from theme/vue/demo1/src and paste it into our project resources/js folder.

Setup project js files

Now we can add into our resources/js/app.js file line

require('./src/main.js');

To enable "@" sign inside the vue paths you should add this code into the webpack.mix.js.

mix.webpackConfig({
    output: {
        chunkFilename: `js/[name].js?id=[chunkhash]`
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.runtime.esm.js',
            '@': path.resolve(__dirname, 'resources/js/src/')
        }
    }
});

Build files

Now we are ready to build our js file by running this command

npm run dev

Prepare app.blade.php

Now we can add a new file inside resources/views. Let's call it app.blade.php

And add inside app.blade.php file this code


<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="csrf-token" value="{{ csrf_token() }}"/>
   <title>Laravel Vue Example</title>
   <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
   <link href="{{ mix('css/app.css') }}" type="text/css" rel="stylesheet"/>
</head>
<body>
   <div id="app">
   </div>
   <script src="{{ mix('js/app.js') }}" type="text/javascript"></script>
</body>
</html>

Now we can add new route into file routes/web.php

Route::get('{any}', function () {
   return view('app');
})->where('any', '.*');

Now we are ready to run our vue_laravel project by running this command

php artisan serve

VERSIONS

GENERAL