Vue Intgration with laravel

Helllo ,
I am Trying to intgrate ( Vue demo 1, Metronic V 8.81 ) with laravel depending on this documentation
https://preview.keenthemes.com/metronic8/vue/docs/#/vue-laravel-integration

So I have two issues
1. When i run any npm install command i am getting this error (11 vulnerabilities (4 moderate, 7 high)
And this Is what i got from npm fund
demo1@8.1.1
├── https://opencollective.com/popperjs
│ └── @popperjs/core@2.11.5, @sxzz/popperjs-es@2.11.7
├── https://github.com/sponsors/twbs
│ └── bootstrap@5.2.0-beta1
├── https://opencollective.com/core-js
│ └── core-js@3.24.1
├── https://sweetalert2.github.io/#donations
│ └── sweetalert2@9.17.2
├── https://github.com/sponsors/posva
│ └── vue-router@4.1.3
├── https://opencollective.com/typescript-eslint
│ └── @typescript-eslint/eslint-plugin@5.33.0, @typescript-eslint/scope-manager@5.33.0, @typescript-eslint/types@5.33.0, @typescript-eslint/visitor-keys@5.33.0, @typescript-eslint/type-utils@5.33.0, @typescript-eslint/utils@5.33.0, @typescript-eslint/typescript-estree@5.33.0, @typescript-eslint/parser@5.33.0
├─┬ https://opencollective.com/eslint
│ │ └── eslint@7.32.0, espree@9.3.3
│ └── https://github.com/chalk/slice-ansi?sponsor=1
│ └── slice-ansi@4.0.0
├── https://github.com/prettier/prettier?sponsor=1
│ └── prettier@2.7.1
├── https://opencollective.com/webpack
│ └── sass-loader@12.6.0, webpack-cli@4.10.0, eslint-webpack-plugin@3.2.0, schema-utils@4.0.0, webpack@5.74.0, schema-utils@3.1.1, terser-webpack-plugin@5.3.4, thread-loader@3.0.4, schema-utils@2.7.0, copy-webpack-plugin@9.1.0, css-loader@6.7.1, css-minimizer-webpack-plugin@3.4.1, mini-css-extract-plugin@2.6.1, postcss-loader@6.2.1, webpack-dev-server@4.10.0, webpack-dev-middleware@5.3.3
├── https://opencollective.com/preact
│ └── preact@10.10.2
├── https://github.com/sponsors/RubenVerborgh
│ └── follow-redirects@1.15.1
├── https://github.com/sponsors/antfu
│ └── @vueuse/core@8.9.4, @vueuse/metadata@8.9.4, @vueuse/shared@8.9.4, vue-demi@0.13.7, vue-demi@0.12.5
├── https://github.com/sponsors/ljharb
│ └── deep-equal@1.1.1, is-arguments@1.1.1, call-bind@1.0.2, get-intrinsic@1.1.2, has-symbols@1.0.3, has-tostringtag@1.0.0, is-date-object@1.0.5, is-regex@1.1.4, object-is@1.1.5, define-properties@1.1.4, has-property-descriptors@1.0.0, regexp.prototype.flags@1.4.3, functions-have-names@1.2.3, resolve@1.22.1, is-core-module@2.10.0, supports-preserve-symlinks-flag@1.0.0, qs@6.10.3, side-channel@1.0.4, object-inspect@1.12.2, object.values@1.1.5, es-abstract@1.20.1, es-to-primitive@1.2.1, is-symbol@1.0.4, function.prototype.name@1.1.5, get-symbol-description@1.0.0, is-callable@1.2.4, is-negative-zero@2.0.2, is-shared-array-buffer@1.0.2, is-string@1.0.7, is-weakref@1.0.2, object.assign@4.1.3, string.prototype.trimend@1.0.5, string.prototype.trimstart@1.0.5, unbox-primitive@1.0.2, has-bigints@1.0.2, which-boxed-primitive@1.0.2, is-bigint@1.0.4, is-boolean-object@1.1.2, is-number-object@1.0.7, util.promisify@1.0.1, object.getownpropertydescriptors@2.1.4, array.prototype.reduce@1.0.4
├─┬ https://github.com/chalk/chalk?sponsor=1
│ │ └── chalk@4.1.2
│ └── https://github.com/chalk/ansi-styles?sponsor=1
│ └── ansi-styles@4.3.0
├── https://opencollective.com/babel
│ └── @babel/core@7.18.10
├── https://github.com/avajs/find-cache-dir?sponsor=1
│ └── find-cache-dir@3.3.2
├── https://paulmillr.com/funding/
│ └── chokidar@3.5.3
├── https://github.com/sponsors/isaacs
│ └── glob@7.2.3, rimraf@3.0.2
├─┬ https://opencollective.com/postcss/
│ │ └── autoprefixer@10.4.8, postcss@7.0.39
│ └── https://www.patreon.com/infusion
│ └── fraction.js@4.2.0
├─┬ https://opencollective.com/cssnano
│ │ └── cssnano@5.1.13
│ └─┬ https://github.com/sponsors/fb55
│ │ └── css-select@4.3.0, css-what@6.1.0, domelementtype@2.3.0, css-what@3.4.2
│ ├── https://github.com/fb55/domhandler?sponsor=1
│ │ └── domhandler@4.3.1
│ ├─┬ https://github.com/fb55/domutils?sponsor=1
│ │ │ └── domutils@2.8.0
│ │ └─┬ https://github.com/cheeriojs/dom-serializer?sponsor=1
│ │ │ └── dom-serializer@1.4.1
│ │ └── https://github.com/fb55/entities?sponsor=1
│ │ └── entities@2.2.0
│ └── https://github.com/fb55/nth-check?sponsor=1
│ └── nth-check@2.1.1
├─┬ https://opencollective.com/html-webpack-plugin
│ │ └── html-webpack-plugin@5.5.0
│ └── https://github.com/fb55/htmlparser2?sponsor=1
│ └── htmlparser2@6.1.0
├── https://github.com/chalk/wrap-ansi?sponsor=1
│ └── wrap-ansi@7.0.0
├── https://github.com/sindresorhus/execa?sponsor=1
│ └── execa@5.1.1
└── https://github.com/sponsors/wooorm
└── vendors@1.0.4

2.And also i want to ask about webpack.mix , in the latest version of laravel there is no webpack.mix.js file instead there is vite.config.js, so what the changes should i do to integrate successfully.

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)

Hi Salma,


  1. We will check these vulnerabilities and try to include a fix as soon as possible, these are just messages which shouldn't influence an installation process.

  2. We already working on a doc update, an updated doc will be available in upcoming Metronic releases.

    For now, for vue + laravel integration you can refer to the tutorial below:
    https://techvblogs.com/blog/how-to-install-vue-3-in-laravel-9-with-vite


Regards,
Lauris Stepanovs,
Keenthemes Support Team

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(