Можно ли использовать Nuxt.js + Vuetify + внешнюю библиотеку Javascript?

Question

Я использую Nuxt.js с Vuetify, я хотел бы использовать внешнюю библиотеку Javascript только для меню, но кажется, что 2 не хотят сосуществовать, потому что я не вижу никаких событий, исходящих из внешней библиотеки Javascript, назначенной для элемент HTML.

Возможна ли идея о том, чтобы Vuetify сосуществовал с внешним книжным магазином?

Я что-то забыл в конфигурации Webpack? Вы можете помочь мне?

Вот мой nuxt.config.js

import colors from 'vuetify/es5/util/colors'

const webpack = require("webpack")

export default {
  /*
  ** Nuxt rendering mode
  ** See https://nuxtjs.org/api/configuration-mode
  */
  mode: 'universal',
  /*
  ** Nuxt target
  ** See https://nuxtjs.org/api/configuration-target
  */
  target: 'server',
  /*
  ** Headers of the page
  ** See https://nuxtjs.org/api/configuration-head
  */
  head: {
    titleTemplate: '%s - ' + process.env.npm_package_name,
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    script: [
      { src: 'https://botifulthemes.net/js/jquery/jquery.js' },
      { src: 'https://botifulthemes.net/js/vendor.min.js', body: true },
      { src: 'https://botifulthemes.net/js/underscore.min.js', body: true },
      { src: 'https://botifulthemes.net/js/app.min.js', body: true }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Global CSS
  */
  css: [

  ],
  /*
  ** Plugins to load before mounting the App
  ** https://nuxtjs.org/guide/plugins
  */
  plugins: [
    // { src: '~plugins/vendor-app.js' },
    // { src: '~plugins/underscore-app.js' },
    // { src: '~plugins/main-app.js' },
  ],
  /*
  ** Auto import components
  ** See https://nuxtjs.org/api/configuration-components
  */
  components: true,
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
    // Doc: https://github.com/nuxt-community/eslint-module
    '@nuxtjs/eslint-module',
    '@nuxtjs/vuetify'
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios'
  ],
  /*
  ** Axios module configuration
  ** See https://axios.nuxtjs.org/options
  */
  axios: {},
  /*
  ** vuetify module configuration
  ** https://github.com/nuxt-community/vuetify-module
  */
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      options: {
        customProperties: true
      },
      dark: false,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        },
        light: {
          background: '#001429',
          primary: '#f4511e',
          secondary: '#001429'
        }
      }
    }
  },
  /*
  ** Build configuration
  ** See https://nuxtjs.org/api/configuration-build/
  */
  build: {
    // vendor: [ 'jquery' ],
    // plugins: [
    //     new webpack.ProvidePlugin({
    //         $: 'jquery',
    //         jQuery: 'jquery',
    //         'window.jQuery': 'jquery'
    //     })
    // ],
    /*
    ** Vous pouvez étendre la configuration webpack ici
   */
   extend(config, ctx) {
      // Exécuter ESLint lors de la sauvegarde
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: "pre",
          test: /\.(js|vue)$/,
          loader: "eslint-loader",
          exclude: /(node_modules)/,
          options: {
            fix: true
          }
        })
        // config.module.rules.push({
        //     test: /\.(js|jsx)$/i,
        //     loader: 'file-loader',
        //     options: {
        //       name: '[path][name].[ext]'
        //     }
        // })
      }
    }
  }
}

Эта часть ниже неактивна:

script: [
      { src: 'https://botifulthemes.net/js/jquery/jquery.js' },
      { src: 'https://botifulthemes.net/js/vendor.min.js', body: true },
      { src: 'https://botifulthemes.net/js/underscore.min.js', body: true },
      { src: 'https://botifulthemes.net/js/app.min.js', body: true }
    ],

Answer 1

Как сказано в этом документе: "Vue - это ревнивая библиотека в том смысле, что вы должны позволить ей полностью владеть патчем DOM, который вы ей даете (определяется тем, что вы передаете el)"

Итак, если вы хотите использовать другую библиотеку, такую ​​как jquery, ссылка для чтения ниже будет полезна https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/