bug: Cannot use ionic serve with Vue.js

[Livijn]

I created a new project following the guidelines provided here by @mhartington. However, using ionic serve isn't working.

At first, I received an error saying a needed to add ionic:serve to the npm scripts. So I added that. Then I needed to install @ionic/app-scripts. Then I had to manually create a tsconfig.json which I just copied over from a project created with ionic start. However, I am still receiving this error:

[npm] [16:07:59] ionic-app-scripts 3.1.2
[npm] [16:07:59] watch started ...
[npm] [16:07:59] build dev started ...
[npm] [16:07:59] typescript error
[npm] No inputs were found in config file '/Users/fredrik/Documents/code/xxx-ionic/tsconfig.json'.
[npm] Specified 'include' paths were '["**/*"]' and 'exclude' paths were '["./dist/out-tsc"]'.

Also, running ionic capacitor run or ionic capacitor build all fail.

[d0peCode]

I followed steps from link to words "And that’s it!" and then run app with npm run serve and it print error

chunk-ea2b3dce.js?d602:13 Uncaught TypeError: Cannot convert undefined or null to object
at Function.keys ()
at addIcons (chunk-ea2b3dce.js?d602:13)
at appInitialize (ionic-vue.esm.js?481b:279)
at Object.install (ionic-vue.esm.js?481b:619)
at Function.Vue.use (vue.runtime.esm.js?2b0e:5101)
at eval (main.js?56d7:9)
at Module../src/main.js (app.js:10285)
at webpack_require (app.js:767)
at fn (app.js:130)
at Object.1 (app.js:10371)

my dependiecies are

{
  "name": "mobile",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@ionic/vue": "0.0.4",
    "core-js": "^2.6.5",
    "register-service-worker": "^1.6.2",
    "vue": "^2.6.10",
    "vue-router": "^3.0.3",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-plugin-eslint": "^3.8.0",
    "@vue/cli-plugin-pwa": "^3.8.0",
    "@vue/cli-service": "^3.8.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.6.10"
  }
}

I can share demo repository if needed.

Does anyone have working repo with ionic+vue?

[Livijn]

I followed steps from link to words "And that’s it!" and then run app with npm run serve and it print error

Does anyone have working repo with ionic+vue?

That is a separate issue but it should work in you run npm install ionicons@4.5.9-1.

[Livijn]

I got it to work by creating an empty file in /src/app/main.ts and then thistsconfig.json.

{
"compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  },
  "files": [
    "./src/app/main.ts"
  ]
}

[Livijn]

However, the following doesn't work:

ionic capacitor run ios --livereload

The live reload function doesn't work (nothing updates). It does work in the browser though, just not the app / simulator.

Output:

[npm] [12:34:37] ionic-app-scripts 3.2.4
[npm] [12:34:37] watch started ...
[npm] [12:34:37] build dev started ...
[npm] [12:34:37] dev server running: http://localhost:8100/
[npm] [12:34:37] watch ready in 84 ms

ionic serve -c

The app doesn't appear in the DevApp.

Output:

[npm] [12:37:54] ionic-app-scripts 3.2.4
[npm] [12:37:54] watch started ...
[npm] [12:37:54] build dev started ...
[npm] [12:37:54] dev server running: http://localhost:8100/
[INFO] Development server running!

Local: http://localhost:8100

[tekpriest]

Facing this same issue, any fix?

[d0peCode]

@asajuenitan If you won't find solution there's option to use quasar framework which use vue and cordova for mobile apps.

[mhartington]

Hello there! Vue support is still beta. With that, not everything is ready for production. CLI integration is one of those. With that in mind, you could still use npm run start from the standard vue CLI project instead.

closing for now, we'll revisit once Vue 3 is release.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.