Nuxt 2.1 & Laravel 7.0 integration issue

[AlakarAAR]

Environment Details to @alexusmai

• OS = Ubuntu(21.04) 64 bit
• Node = v14.17.6
• Nuxt = 2.15.7
• Npm = 7.21.0

Package installation command

npm install laravel-file-manager --save

Folder structure

Package.json

{
  "name": "frontend",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint": "npm run lint:js",
    "build:framevuerk": "framevuerk-builder -c ./framevuerk-config.js",
    "prepublish": "npm run build:framevuerk"
  },
  "dependencies": {
    "core-js": "^3.15.1",
    "framevuerk": "^2.4.2",
    "nuxt": "^2.15.7"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.14.7",
    "@nuxtjs/eslint-config": "^6.0.1",
    "@nuxtjs/eslint-module": "^3.0.2",
    "eslint": "^7.29.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-vue": "^7.12.1",
    "framevuerk-builder": "^2.0.8",
    "laravel-file-manager": "^2.5.4",
    "sass": "^1.42.1",
    "sass-loader": "12.1.0"
  }
}

nuxt.config.js

export default {
  // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
  ssr: true,

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'foodx-frontend',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' },
      { name: 'csrf-token', content: 'csrf_token()' }
    ],
    link: [
      {
        rel: 'stylesheet',
        href:
          'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'
      },
      {

        rel: 'stylesheet',
        href:
          'https://use.fontawesome.com/releases/v5.7.0/css/all.css'
      },
      {
        rel: 'stylesheet',
        href:
          'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'

      },
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    'framevuerk/dist/framevuerk-nuxt.min.css'
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    '@/plugins/framevuerk',
    { src: '~plugins/plugins.js', ssr: true }
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    '@nuxtjs/eslint-module'
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
  ],

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    loaders: {
      sass: {
        implementation: require('sass'),
      },
      scss: {
        implementation: require('sass'),
      },
    },
  }
}

store/index.js

import Vuex from 'vuex'
const createStore = () => {
  return new Vuex.Store({
    state: {},
    mutations: {},
    namespaced: true,
    modules: {
    }
  })
}
export default createStore

plugins/plugins.js

import Vue from 'vue'
import FileManager from 'laravel-file-manager'
import store from '~/store/index.js'

Vue.use(FileManager, {store})

Actual Result

Tregered cmd npm run dev i got error like this

Note: Earlier i am facing module not found error on (plugins FileManager.vue). After installing babel now i facing these type of error.

[Balabaskaran94]

I'm also facing these type of error in nuxt js