Skip to content

TypeScript syntax does not work in Vue templates #9566

Closed
@Demivan

Description

@Demivan

🐛 bug report

Compilation fails when using TypeScript syntax in Vue <template>:

<script setup lang="ts">
let x: string | number = 1
</script>

<template>
  {{ (x as number).toFixed(2) }}
</template>

🎛 Configuration (.babelrc, package.json, cli command)

Default config

{
  "scripts": {
    "build": "parcel build index.html"
  },
  "devDependencies": {
    "@parcel/transformer-vue": "2.12.0",
    "parcel": "^2.12.0"
  },
  "dependencies": {
    "vue": "^3.4.21"
  }
}

🤔 Expected Behavior

No error.

😯 Current Behavior

@parcel/transformer-js: Expected ',', got 'as'

  /parcel-vue/src/App.vue:6:8
    5 | <template>
  > 6 |   {{ (x as number).toFixed(2) }}
  >   |        ^
    7 | </template>
    8 | 

💁 Possible Solution

When lang="ts" is specified for the <script>, <template> should be processed using TypeScript too.

🔦 Context

💻 Code Sample

https://github.com/Demivan/parcel-vue/tree/typescript-template

🌍 Your Environment

Software Version(s)
Parcel 2.12.0
Node 21.6.2
pnpm 8.12.1
Operating System Linux (NixOS)

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions