CODEWITHSUNDEEP
javascriptvue.jsbootstrap-4nuxt.jsadminlte
draw134
draw134

Reputation: 1187

Integrate adminLTE to nuxt project

I created a fresh nuxtjs project and I want to use/add adminLTE components which uses bootstrap4 and many more. How can I integrate it in a pure nuxtjs project? I work with laravel before and I remember I put something like this in my bootstrap.js

require('bootstrap');
require('admin-lte');
require('admin-lte/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js');
require('admin-lte/plugins/toastr/toastr.min.js');

how can I achieve this in nuxtjs? I already installed adminLTE via npm and I did not select any UI framework during installation because adminLTE itself uses bootstrap4 already.

Here is my dependencies

 "dependencies": {
    "@nuxtjs/axios": "^5.3.6",
    "@nuxtjs/dotenv": "^1.4.0",
    "@nuxtjs/pwa": "^3.0.0-0",
    "admin-lte": "^3.0.5",
    "nuxt": "^2.0.0"
  },

in my nuxt.config.js I add something like this in css array

 /*
  ** Global CSS
  */
  css: [
    'admin-lte/plugins/toastr/toastr.min.js',
    'admin-lte',
    'bootstrap'
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
  ],

and I think im wrong because im getting an error in the console when I visit my project. The error is this:

Uncaught ReferenceError: jQuery is not defined
    at eval (adminlte.min.js?a86f:6)
    at eval (adminlte.min.js?a86f:6)
    at eval (adminlte.min.js?a86f:6)
    at Object../node_modules/admin-lte/dist/js/adminlte.min.js (vendors.app.js:177)
    at __webpack_require__ (runtime.js:854)
    at fn (runtime.js:151)
    at eval (App.js:37)
    at Module../.nuxt/App.js (app.js:11)
    at __webpack_require__ (runtime.js:854)
    at fn (runtime.js:151)

Can someone tell me what should I do? I am new to nuxt and I find it different using laravel + vue. Thanks.

Upvotes: 2

Views: 2115

Answers (1)

Misbakh Ahmed
Misbakh Ahmed

Reputation: 129

Run npm i jquery than in your default layout file import jquery

import 'jquery/src/jquery'

Also, add jquery to your plugins

 plugins: [
"~/assets/src/scripts/jquery.min.js" ]

It works for me.

Upvotes: 1

Related Questions