Webpacker: Vue.js 3

[tchukuchuk]

Hi,

Do you know where I can find a working example with vuejs 3 and typescript ?

[Vannsl]

Hi @tchukuchuk,

just a couple of days ago, I added Vue 3 to a Rails app. I want to create a PR to install vue3 with webpacker and write an article/tutorial about it. Please give me 2-3 days to get that done.

Best
Vannsl

[simonhutchings]

How did you add it without webpacker? That would work for me for the time being!

[Vannsl]

https://dev.to/vannsl/vue3-on-rails-l9d

I just published this, I haven't checked for typos yet ;)
Typescript follows!

[simonhutchings]

Great work!

On 11 Oct 2020, at 19:17, Vanessa Böhner [e-mail] wrote:


https://dev.to/vannsl/vue3-on-rails-l9d

I just published this, I haven't checked for typos yet ;)
Typescript follows!

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or unsubscribe.

[guillaumebriday]

v3 installation shouldn't be different from v2

We could close this issue I think 👍

[Vannsl]

@guillaumebriday I would suggest to leave it open. I wanted to create a PR to add the installer on webpacker. The installation is different from vue2. The packages are different and the command to create an app.

[Vannsl]

(If you just want to close the issues for some reason, it's fine for me. I would still create the PR)

[guillaumebriday]

I mean the configuration related to webpacker is the same. Only the install has changed.

Since the whole Vue ecosysteme is not ready for 3 yet, I suggest to add a vue3 install option and keep the actual vue option for a bit.

[Vannsl]

Hi @guillaumebriday, thanks for the quick reply. I actually propose the same. The vue3 ecosystem is not ready yet, therefore vue3 is behind vue@next - so a vue3-install-option is the way to go

[guillaumebriday]

So cool! Thanks 👍

[tchukuchuk]

Hi @Vannsl ,

Thanks a lot for your article !

Do you know when you'll publish the next one about Typescript support ?

[Vannsl]

Hi @tchukuchuk, I plan it to do upcoming weekend.

But as far as I understood it:

• Add a tsconfig.json in the root directory with settings like:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

• Add lang="ts" to the <script> sections of Vue Single File Components.
• Add the src/shims-vue.d.ts

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent
  export default component
}

• And install typescript via `yarn add -D typescript -D
• When using ESLint the typescript-eslint packages, too: yarn add -D. @typescript-eslint/eslint-plugin, @typescript-eslint/parser

Since Vue 3 is written in Typescript, there is no need to import other special packages, like the vue-class-component. This enabled the Class Style API. If you're using that in your current codebase, you might have a problem with the migration right now. I Heard that they still want to support the Class Style API but I'm not sure.

As IDE you might need to use VS Code to install the extension "Vetur". It comes with Typescript support for Vue 3.

The rest then should be Vue-TS-syntax realted and is documented on the offical Vue 3 TS Documentation.

[tchukuchuk]

Thanks ! No need to add and configure ts loader for webpack ?

[Vannsl]

That's a good question with Vue 3 already written in TS, I'm not sure.

If it's not working without, the ts-loader config for vue2 was.

{
      test: /\.tsx?$/,
      loader: 'ts-loader',
      exclude: /node_modules/,
      options: {
        appendTsSuffixTo: [/\.vue$/],
      }
},

[pguegan]

Hi @Vannsl, and thanks for your great contribution!

While following your instructions (I actually cloned your example repository), I ran rapidly into a major problem. I can't even use a simple @click event / action. For instance, in your HelloWorld.vue component, I just added the following button:

<template>
  <p>
    {{ message }}
  </p>
  <button @click="doStuff">Click me</button>
</template>

<script>
  import { ref } from 'vue'
  export default {
    // ...
    methods: {
      doStuff(event) {
        alert('Hello!')
      }
    }
  }
</script>

All compiles successfully, but then, when clicking the button I get the follow JS error:

HelloWorld.vue:7 Uncaught TypeError: $options.doStuff is not a function
    at Object.onClick._cache.<computed>._cache.<computed> (HelloWorld.vue:7)
    at callWithErrorHandling (runtime-core.esm-bundler.js:225)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:235)
    at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js:352)

Do you think it's related to your setup? Has anyone encountered the same issue?

[Vannsl]

Hi @pguegan,

the block methods: {}is part of the "Options API" of Vue 2. It still exists in Vue 3, but I disabled it in the settings. Look for __VUE_OPTIONS_API__ inenvironment.js, set the value to true, restart the webpack-dev-server and try it again. You should see the alert now.

If you want to refactor the code using the setup function of the "Composition API", rewrite the initialisation of the onclick handler to this:

<template>
  <p>
    {{ message }}
  </p>
  <button @click="doStuff">Click me</button>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'HelloWorld',
  setup() {
      const message = ref('Hello World')

      function doStuff(event) {
        alert('Hello!')
      }

      return {
        message,
        doStuff
      }
  },
}
</script>

[tchukuchuk]

Hello @Vannsl ,

Have you tried to switch to Typescript ?

[Vannsl]

Hi @tchukuchuk,

unfortunately something else came up and I have to work on that first. Did you have the chance to try the setup?

[yanovitchsky]

Hi @Vannsl, Thanks for the tutorial.
I've successfully installed vue3 with rails but the typescript setup does not compile the shims
TypeScript emitted no output for vue-shims.d.ts
Do you have any idea on why ? Thanks again.

[Vannsl]

Hi @yanovitchsky thanks for the reminder, I actually will have time again to look into that. Give me a couple of days and I hope I'll return with a result (also at @tchukuchuk )

[t0yohei]

I created a pull request (#2792) to use the Vue3 installer like

rails new myapp --webpack=vue3

or

bundle exec rails webpacker:install:vue3

[guillaumebriday]

As far as I understand from this comment : https://github.com/rails/webpacker/issues/2757#issuecomment-710784864

Installers will be removed, which I think it's a good things because they often do too much or not like in the install guide of every techno we want to install. And it's less thing to maintain for Webpacker contributors

[t0yohei]

Thanks, guillaumebriday. I understand the comment and agree with the way not to use installer but install guide with all installer steps(I guess it could be something like Vannsl wrote).
So I close the pull request.