Ionic-framework: feat: ionic vue vanilla JS option when creating starter

[dlodeprojuicer]

Feature Request

Ionic version:


[] 4.x
[x] 5.x

Ionic Vue version:
[x] 0.3.1

Describe the Feature Request
New Ionic Vue beta setup is using typescript by default. It would be nice to have an option to choose between typescript and javascript.

Describe Preferred Solution

Have a prompt where we can choose if we prefer typescript or javascript

Describe Alternatives

Related Code

Additional Context

[liamdebeasi]

Thanks for the issue. Can you provide your use case for using Ionic Vue without TypeScript? All of our other Ionic Framework integrations (React, Angular) use TypeScript, which is what we recommend for users.

[dlodeprojuicer]

@liamdebeasi we don't use Typescript in Vue. As much as the community is in favour of Typescript, there are still some of us who prefer Javascript.

[liamdebeasi]

Thanks for the follow up. Unfortunately, I do not think this is something we will likely add. We ship Ionic starter applications with the tooling that we recommend to build scalable mobile applications, and TypeScript is one of them.

That being said, here are some steps you can take to quickly remove TypeScript from your Ionic Vue app and just use JavaScript instead:

1. Remove TypeScript dependencies:

npm uninstall --save typescript @types/jest @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/cli-plugin-typescript

1. Change all .ts files to .js. In a blank Ionic Vue app this should only be router/index.ts and main.ts.
2. Remove '@vue/typescript/recommended' and '@typescript-eslint/no-explicit-any': 'off', from .eslintrc.js.
3. Remove Array<RouteRecordRaw> from router/index.js.

I am going to close this, but let me know if you run into any issues removing TypeScript from your app. Thanks!

[funzeye]

+1 for this - in my own personal case I have a Vue 2 JavaScript app that I'm looking to migrate to Vue 3 - its tricky enough trying to do the migration without throwing TypeScript into the mix!!

[liamdebeasi]

Hey everyone,

We are going to re-open this to further gauge the community's interest in this option. While we think TypeScript is important for building scalable mobile apps, the Vue ecosystem seems to be one where vanilla JS is really valued.

If you are interested in Vanilla JS being an option when creating a new Ionic Vue app, please leave a thumbs up (👍 ) reaction on the initial post. Thanks!

[BerkeAras]

+1 from me - Not just for vue, but in general. Why not creating a vanilla JS version of the starters? This issue is still opened: https://github.com/ionic-team/app-wizard-issues/issues/6

[ghuroux]

+1 Please

[liamdebeasi]

Hi everyone,

We are leaning towards shipping our starters with TypeScript, but providing easy steps to eject from TypeScript. Does anyone have a use case where running the steps in https://github.com/ionic-team/ionic-framework/issues/22060#issuecomment-690349173 is not enough to easily eject from TypeScript?

I spoke with the team, and we do want our starters to be opinionated towards the tooling with think is best to build performant and scalable mobile apps.

Additionally, regarding https://github.com/ionic-team/ionic-framework/issues/22060#issuecomment-706743511 this probably will not happen as Angular only supports TypeScript.

[BerkeAras]

Hi everyone,

We are leaning towards shipping our starters with TypeScript, but providing easy steps to eject from TypeScript. Does anyone have a use case where running the steps in https://github.com/ionic-team/ionic-framework/issues/22060#issuecomment-690349173 is not enough to easily eject from TypeScript?

I spoke with the team, and we do want our starters to be opinionated towards the tooling with think is best to build performant and scalable mobile apps.

Additionally, regarding https://github.com/ionic-team/ionic-framework/issues/22060#issuecomment-706743511 this probably will not happen as Angular only supports TypeScript.

@liamdebeasi can I use it just for vue or vanilla js too?

[liamdebeasi]

@liamdebeasi can I use it just for vue or vanilla js too?

Can you clarify what you mean?

[BerkeAras]

@liamdebeasi Can I create vanilla js ionic apps (no framework) with this starters?

[liamdebeasi]

The starters we have right now are for Angular, React, and Vue. For Vanilla JS (no Angular/React/Vue either), there isn't really a need for starters. All you need to do is add the following to your <head> and then you can use Ionic Framework:

<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@latest/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@latest/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@latest/css/ionic.bundle.css"/>

[dlodeprojuicer]

Does anyone have a use case where running the steps in #22060 (comment) is not enough to easily eject from TypeScript?

I did not have any issues with the steps.

So if there is a major update, will we have to upgrade packages and then run the steps each time?

[liamdebeasi]

You should only have to follow the steps provided in https://github.com/ionic-team/ionic-framework/issues/22060#issuecomment-690349173 once at the start of a new project. If you were to upgrade Ionic Framework or Vue to a new version you would not need to run those TypeScript eject steps again.

[dlodeprojuicer]

Ok that was my concern with the typescript eject workaround.... Thanks for reconsidering it.

_I need to rethink my vanilla JS campaign plan_

[liamdebeasi]

Hi everyone,

We just shipped new documentation that shows developers how to properly get setup with Ionic Vue in JavaScript-only environments: https://ionicframework.com/docs/vue/quickstart#build-your-way-with-typescript-or-javascript

Note that these steps will only need to be run at the start of an Ionic Vue project. You will not need to run these steps every time you upgrade your installed version of Ionic Framework or Vue.

Thanks!

[duanemalcolm]

Incidentally, I go this error when running ionic serve on Linux/Firefox:

Failed to compile.

multi (webpack)-dev-server/client?http://192.168.1.2:8100&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts
Module not found: Error: Can't resolve './src/main.ts' in '/home/....'

The solution I found was to add a vue.config.js file with:

module.exports = {
    pages: {
      index: {
        entry: 'src/main.js'
      }
    }
  }