Create app with ionic and vue.js

I’m trying to create an ionic vue.js application. but, I’m already get stucked on the installation
here is what I have. how can i fix it please ?

? Starter template: tabs
√ Preparing directory .\app-vue-ionic in 1.42ms
√ Downloading and extracting tabs starter in 1.09s

ionic integrations enable capacitor --quiet – app-vue-ionic io.ionic.starter
npm.cmd i --save -E @capacitor/core@latest
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: cache-loader@4.1.0
npm WARN Found: webpack@5.67.0
npm WARN node_modules/webpack
npm WARN webpack@“^5.54.0” from @vue/cli-plugin-babel@5.0.0-rc.2
npm WARN node_modules/@vue/cli-plugin-babel
npm WARN dev @vue/cli-plugin-babel@“~5.0.0-rc.1” from the root project
npm WARN 20 more (@vue/cli-service, @vue/cli-plugin-eslint, …)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer webpack@“^4.0.0” from cache-loader@4.1.0
npm WARN node_modules/cache-loader
npm WARN cache-loader@“^4.1.0” from @vue/cli-service@5.0.0-rc.2
npm WARN node_modules/@vue/cli-service
npm WARN 1 more (@vue/cli-plugin-typescript)
npm WARN
npm WARN Conflicting peer dependency: webpack@4.46.0
npm WARN node_modules/webpack
npm WARN peer webpack@“^4.0.0” from cache-loader@4.1.0
npm WARN node_modules/cache-loader
npm WARN cache-loader@“^4.1.0” from @vue/cli-service@5.0.0-rc.2
npm WARN node_modules/@vue/cli-service
npm WARN 1 more (@vue/cli-plugin-typescript)
npm WARN deprecated @types/webpack-dev-server@4.7.2: This is a stub types definition. webpack-dev-server provides its own type definitions, so you do not need this installed.
npm WARN deprecated source-map-url@0.4.1: See GitHub - lydell/source-map-url: [DEPRECATED] Tools for working with sourceMappingURL comments.
npm WARN deprecated urix@0.1.0: Please see GitHub - lydell/urix: [DEPRECATED] Makes Windows-style paths more unix and URI friendly.
npm WARN deprecated source-map-resolve@0.5.3: See GitHub - lydell/source-map-resolve: [DEPRECATED] Resolve the source map and/or sources for a generated file.
npm WARN deprecated resolve-url@0.2.1: GitHub - lydell/resolve-url: [DEPRECATED] Like Node.js’ `path.resolve`/`url.resolve` for the browser.
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.

I am able to create a Vue tabs project just fine. There are a few warnings but nothing critical. Can you run ionic info and report back what it gives you?

I just need to install the latest version of the Ionic CLI, and finally I can create a vue ionic project.
thank you for replying

npm install -g @ionic/cli@latest

1 Like

Hi,
I am also getting these warnings when running ionic start and creating a new VueJS project:

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: cache-loader@4.1.0
npm WARN Found: webpack@5.68.0
npm WARN node_modules/webpack
npm WARN   webpack@"^5.54.0" from @vue/cli-plugin-babel@5.0.0-rc.2
npm WARN   node_modules/@vue/cli-plugin-babel
npm WARN     dev @vue/cli-plugin-babel@"~5.0.0-rc.1" from the root project
npm WARN   20 more (@vue/cli-service, @vue/cli-plugin-eslint, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer webpack@"^4.0.0" from cache-loader@4.1.0
npm WARN node_modules/cache-loader
npm WARN   cache-loader@"^4.1.0" from @vue/cli-service@5.0.0-rc.2
npm WARN   node_modules/@vue/cli-service
npm WARN   1 more (@vue/cli-plugin-typescript)
npm WARN 
npm WARN Conflicting peer dependency: webpack@4.46.0
npm WARN node_modules/webpack
npm WARN   peer webpack@"^4.0.0" from cache-loader@4.1.0
npm WARN   node_modules/cache-loader
npm WARN     cache-loader@"^4.1.0" from @vue/cli-service@5.0.0-rc.2
npm WARN     node_modules/@vue/cli-service
npm WARN     1 more (@vue/cli-plugin-typescript)

Output from ionic info:

[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package'
       
       Require stack:
       - /home/ben/.nvm/versions/node/v17.4.0/lib/node_modules/@ionic/cli/lib/project/index.js
       - /home/ben/.nvm/versions/node/v17.4.0/lib/node_modules/@ionic/cli/lib/index.js
       - /home/ben/.nvm/versions/node/v17.4.0/lib/node_modules/@ionic/cli/index.js
       - /home/ben/.nvm/versions/node/v17.4.0/lib/node_modules/@ionic/cli/bin/ionic
[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package'
       
       Require stack:
       - /home/ben/.nvm/versions/node/v17.4.0/lib/node_modules/@ionic/cli/lib/project/index.js
       - /home/ben/.nvm/versions/node/v17.4.0/lib/node_modules/@ionic/cli/lib/index.js
       - /home/ben/.nvm/versions/node/v17.4.0/lib/node_modules/@ionic/cli/index.js
       - /home/ben/.nvm/versions/node/v17.4.0/lib/node_modules/@ionic/cli/bin/ionic

Ionic:

   Ionic CLI       : 6.18.1 (/home/ben/.nvm/versions/node/v17.4.0/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 6.0.5

Capacitor:

   Capacitor CLI      : 3.4.0
   @capacitor/android : not installed
   @capacitor/core    : 3.4.0
   @capacitor/ios     : not installed

Utility:

   cordova-res : not installed globally
   native-run  : 1.5.0

System:

   NodeJS : v17.4.0 (/home/ben/.nvm/versions/node/v17.4.0/bin/node)
   npm    : 8.3.1
   OS     : Linux 5.13

Can anyone advise on how to fix the dependencies please?