JSX for Vue 3 - Babel Plugin JSX for Vue 3.0

Related tags

Utilities vuejs jsx
Overview

Babel Plugin JSX for Vue 3.0

CircleCI npm package

To add Vue JSX support.

English | 简体中文

Installation

Install the plugin with:

npm install @vue/babel-plugin-jsx -D

Then add the plugin to .babelrc:

{
  "plugins": ["@vue/babel-plugin-jsx"]
}

Usage

options

transformOn

Type: boolean

Default: false

transform on: { click: xx } to onClick: xxx

optimize

Type: boolean

Default: false

enable optimization or not. It's not recommended to enable it If you are not familiar with Vue 3.

isCustomElement

Type: (tag: string) => boolean

Default: undefined

configuring custom elements

mergeProps

Type: boolean

Default: true

merge static and dynamic class / style attributes / onXXX handlers

enableObjectSlots

Type: boolean

Default: true

Whether to enable object slots (mentioned below the document) syntax". It might be useful in JSX, but it will add a lot of _isSlot condition expressions which increase your bundle size. And v-slots is still available even if enableObjectSlots is turned off.

pragma

Type: string

Default: createVNode

Replace the function used when compiling JSX expressions.

Syntax

Content

functional component

const App = () => <div>Vue 3.0</div>;

with render

const App = {
  render() {
    return <div>Vue 3.0</div>;
  },
};
{ count.value++; }; return () => (
{count.value}
); }, }); ">
import { withModifiers, defineComponent } from "vue";

const App = defineComponent({
  setup() {
    const count = ref(0);

    const inc = () => {
      count.value++;
    };

    return () => (
      <div onClick={withModifiers(inc, ["self"])}>{count.value}</div>
    );
  },
});

Fragment

const App = () => (
  <>
    <span>I'm</span>
    <span>Fragment</span>
  </>
);

Attributes / Props

; ">
const App = () => <input type="email" />;

with a dynamic binding:

; ">
const placeholderText = "email";
const App = () => <input type="email" placeholder={placeholderText} />;

Directives

v-show

const App = {
  data() {
    return { visible: true };
  },
  render() {
    return <input v-show={this.visible} />;
  },
};

v-model

Note: You should pass the second param as string for using arg.

<input v-model={val} />
">
<input v-model={[val, ["modifier"]]} />
">
<A v-model={[val, "argument", ["modifier"]]} />

Will compile to:

(val = $event), }); ">
h(A, {
  argument: val,
  argumentModifiers: {
    modifier: true,
  },
  "onUpdate:argument": ($event) => (val = $event),
});

v-models

Note: You should pass a Two-dimensional Arrays to v-models.

">
<A v-models={[[foo], [bar, "bar"]]} />
">
<A
  v-models={[
    [foo, "foo"],
    [bar, "bar"],
  ]}
/>
">
<A
  v-models={[
    [foo, ["modifier"]],
    [bar, "bar", ["modifier"]],
  ]}
/>

Will compile to:

(foo = $event), bar: bar, barModifiers: { modifier: true, }, "onUpdate:bar": ($event) => (bar = $event), }); ">
h(A, {
  modelValue: foo,
  modelModifiers: {
    modifier: true,
  },
  "onUpdate:modelValue": ($event) => (foo = $event),
  bar: bar,
  barModifiers: {
    modifier: true,
  },
  "onUpdate:bar": ($event) => (bar = $event),
});

custom directive

; }, }; ">
const App = {
  directives: { custom: customDirective },
  setup() {
    return () => <a v-custom={[val, "arg", ["a", "b"]]} />;
  },
};

Slot

Note: In jsx, v-slot should be replace with v-slots

); }, }; ">
const A = (props, { slots }) => (
  <>
    <h1>{ slots.default ? slots.default() : 'foo' }</h1>
    <h2>{ slots.bar?.() }</h2>
  </>
);

const App = {
  setup() {
    const slots = {
      bar: () => <span>B</span>,
    };
    return () => (
      <A v-slots={slots}>
        <div>A</div>
      </A>
    );
  },
};

// or

const App = {
  setup() {
    const slots = {
      default: () => <div>A</div>,
      bar: () => <span>B</span>,
    };
    return () => <A v-slots={slots} />;
  },
};

// or you can use object slots when `enableObjectSlots` is not false.
const App = {
  setup() {
    return () => (
      <>
        <A>
          {{
            default: () => <div>A</div>,
            bar: () => <span>B</span>,
          }}
        </A>
        <B>{() => "foo"}</B>
      </>
    );
  },
};

In TypeScript

tsconfig.json:

{
  "compilerOptions": {
    "jsx": "preserve"
  }
}

Who is using


Ant Design Vue

Vant

Element Plus

Vue Json Pretty

Compatibility

This repo is only compatible with:

  • Babel 7+
  • Vue 3+
Comments
  • Webpack HMR not working

    Webpack HMR not working

    I am using vue js, without cli, since I need to configure webpack myself. I couldn't make jsx (vuejs 3) hot update by webpack HMR, and documentation about it is really poor and I spent several hours searching and trying to make it work.

    Is there any package, which provides need loader?

    opened by giorgi94 13
  • [Question] How to use suspense?

    [Question] How to use suspense?

    Can I use suspense like this?

    then I get below

    [Vue warn]: Failed to resolve component: suspense If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

    How can I use suspense?

    question 
    opened by SoftrainHere 9
  • How to use

    How to use "v-once" directive in JSX?

    🧐 Problem Description

    Do not understand how to use "v-once" directive with jsx?

    💻 Sample code

    ...
    <div v-once>render once or not....</div>
    ...
    

    🚑 Other information

    When I try apply this directive I get error:

    Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'deep')
        at withDirectives (runtime-core.esm-bundler.js?5c40:3019)
    
    question 
    opened by funny-family 9
  • Update not triggering with event listener on hoc

    Update not triggering with event listener on hoc

    jsx: 1.0.0-beta.3 vue: 3.0.0-beta.23

    import { h, Transition } from 'vue';
    
    function MyTransition(props, ctx) {
      return h(Transition, ctx.slots.default);
    }
    
    setup() {
      const isOpen = ref(false);
      setInterval(() => { isOpen.value = !isOpen.value }, 1000);
    
      return () => <MyTransition>{isOpen.value && <h1>Visible</h1>}</MyTransition>;
    }
    

    does not seem to trigger an update on isOpen change. Converting it to an h function:

    return () => h(MyTransition, isOpen.value ? <h1>Visible</h1> : null);
    // or recommended
    return () => h(MyTransition, () => isOpen.value ? <h1>Visible</h1> : null);
    

    works fine though. I tried converting functional component to a normal component but the problem persists.

    bug 
    opened by donnysim 9
  • How to define default slot?

    How to define default slot?

    Hello, Now I want to define a slot and default slot, but I didn't find any good way. please help me to resolve this.

    💻 Sample code

    renderSlot(slots, 'default')
    
    // this is what I want to define the default slot
    <Button type="primary" htmlType="submit">登录</Button>
    
    question 
    opened by linkscope 8
  • .vue 文件中使用 jsx, style 的 scoped 不起作用

    .vue 文件中使用 jsx, style 的 scoped 不起作用

    style 的 scoped 生成的 data-v-xxxx, jsx 生成的为 data-v-xxxx-s

    image

    image

    ===

    自己尝试看了一下源码, 没有解决的, 目前猜想是, jsx 的 vnode 丢失了 scopeId 属性, 导致 vue3 的 runtime 把 jsx 的 dom 当做了 slot.

    因为 template 中执行了这个方法, 使得 vnode 获取了 scopeId

    image

    image

    opened by BoltDoggy 8
  • single function as children should keep it

    single function as children should keep it

    When we write this code:

    <Comp>{() => 'foo'}</Comp>
    

    we should not wrapper the expressionContainer into another functionExpression, this PR implement it.

    I PR this for a preview of implementation.

    There is still a TODO left, because I'm not very familiar with babel APi, I am requiring a early preview for my code.

    Please give me some feed back

    opened by Jokcy 8
  • Does not support multiple v-models

    Does not support multiple v-models

    https://v3.vuejs.org/guide/migration/v-model.html#v-model-arguments

    <A
      v-model={[value, 'value']} 
      v-model={[visible, 'visible']}  />
    

    JSX elements cannot have multiple attributes with the same name

    opened by Linkontoask 7
  • 能否使用slots和KeepAlive缓存

    能否使用slots和KeepAlive缓存

    vue template

    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
    

    How to use it in JSX?

    opened by Buzz888 7
  • how to bind keyup.enter event?

    how to bind keyup.enter event?

    🐛 Bug description

    how to bind keyup.enter event?

    🏞 Desired result

    bind success

    🚑 Other information

    • now
    <input onKeyup={this.onKeyup} >
    
    const onKeyup = (e: any) => {
          if (e.key === 'Enter') {
            console.log('enter event')
          }
        }
    
    • Is there an easier way to write it like template
    @keyup.enter = 'fn'
    
    bug 
    opened by zhoufanglu 6
  • How to use v-model in component?

    How to use v-model in component?

    // index.tsx image

    // Modal.tsx image

    I refer <A v-model={[val, 'argument', ['modifier']]} />, but got typescript error.

    Version: vue: 3.0.2 @vue/babel-plugin-jsx: 1.0.0-rc.3 typescript: 3.9.7

    opened by lilililee 6
  • chore(deps): bump json5 from 1.0.1 to 1.0.2

    chore(deps): bump json5 from 1.0.1 to 1.0.2

    Bumps json5 from 1.0.1 to 1.0.2.

    Release notes

    Sourced from json5's releases.

    v1.0.2

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295). This has been backported to v1. (#298)
    Changelog

    Sourced from json5's changelog.

    Unreleased [code, diff]

    v2.2.3 [code, diff]

    v2.2.2 [code, diff]

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).

    v2.2.1 [code, diff]

    • Fix: Removed dependence on minimist to patch CVE-2021-44906. (#266)

    v2.2.0 [code, diff]

    • New: Accurate and documented TypeScript declarations are now included. There is no need to install @types/json5. (#236, #244)

    v2.1.3 [code, diff]

    • Fix: An out of memory bug when parsing numbers has been fixed. (#228, #229)

    v2.1.2 [code, diff]

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • vue3+vite+tsx TSX files in Google debug exception

    vue3+vite+tsx TSX files in Google debug exception

    🧐 as the img, i can not debug in chrome

    image

    💻 Sample code

    file : data-picker.vue
    <script type="text/babel" lang="tsx" name="DataPicker">
    import { reactive, ref, toRefs } from 'vue'
    import { isArray } from '../../utils/methods/types';
    export default {
        props: {
            placeholder: {
                type: String,
                default: '请输入'
            },
            label: {
                type: String
            },
            clearable: {
                type: Boolean,
                default: true
            },
            shortcuts: {
                type: Array,
                default: ()=> [],
        
            },
        },
    
        setup(props: any) {
            debugger
            // const state = reactive({
            //     inputVal: ''
            // })
    
            const value2 = ref('')
            const defaultTime2: [Date, Date] = [new Date(2000, 1, 1, 12, 0, 0), new Date(2000, 2, 1, 8, 0, 0)] // '12:00:00', '08:00:00'
            const scopeShortcuts = ref([
               
            ])
            const mergeShortcuts = computed(()=> {
                debugger
                if(props.shortcuts && isArray(props.shortcuts) && props.shortcuts.length>0) {
                    return props.shortcuts
                } else {
                    return scopeShortcuts
                }
            })
    
            return { value2, defaultTime2,mergeShortcuts }
        },
        render() {
            debugger
            return (
                <el-date-picker
                    vModel={this.value2}
                    type="datetimerange"
                    shortcuts={this.mergeShortcuts}
                    range-separator="To"
                    start-placeholder="Start date"
                    end-placeholder="End date"
                    default-time={this.defaultTime2}
                />
            )
        }
    }
    </script>
    <style scoped></style>
    

    🚑 Other information config

    // vite.config.ts
    {
            // 静态资源基础路径 base:"./":"/"
            base: './',
            envDir: './env', //这里使用相对路径,绝对路径其实也可以(环境变量配置的文件路径)
            envPrefix: ['VITE', 'VENUS'], //vite默认只加载VITE(设置prefix可识别其他配置项)
            plugins: [
                vue({ reactivityTransform: true }),
                vueJsx(),
                // 自动引入compostitionApi和全局typescript说明
                autoImport({
                    resolvers: [ElementPlusResolver()],
                    include: [
                        /\.[t]sx?$/, //匹配.ts,.tsx,.js,.jsx
                        /\.vue$/,
                        /\.vue\?vue/, //.vue
                        /\.md$/ //.md
                    ],
                    imports: ['vue', 'vue-router'], //自动导入vue和vue-router相关方法
                    dts: 'src/auto-imports.d.ts' //生成auto-import.d.ts  全局声明
                }),
                componentsVite({
                    resolvers: [ElementPlusResolver()],
                    dts: 'src/components-imports.d.ts', //生成components-import.d.ts  全局声明
                    dirs: ['src/components'] //按需加载的文件夹
                }),
                visualizer({
                    open: true, //设置为 true,否则无效
                    gzipSize: true,
                    brotliSize: true
                }),
                resolveExternalsPlugin({ AMap: 'AMap' }),
                // 需要时可以放开,这里暂时没有调用
                viteCompression({
                    // 生成压缩包gz
                    verbose: true, //输出压缩成功
                    disable: false, // 是否禁用
                    threshold: 10240, // 体积大于阈值会被压缩,单位是b
                    algorithm: 'gzip', // 压缩算法
                    ext: '.gz' // 生成的压缩包后缀
                })
            ],
            // 强制预构建插件包
            optimizeDeps: {
                include: ['axios']
            },
            css: {
                // css预处理器
                preprocessorOptions: {
                    less: {
                        chartset: false,
                        modifyVars: {
                            // 全局less变量存储路径(配置less的全局变量)
                            hack: `true; @import (reference) "${path.resolve('src/styles/common.less')}";`
                        },
                        javascriptEnabled: true
                    }
                },
                postcss: {
                    plugins: [
                        {
                            postcssPlugin: 'internal:charset-removal',
                            AtRule: {
                                charset: (atRule: any) => {
                                    // 去除elementPlus内部charset警告
                                    if (atRule.name === 'charset') {
                                        atRule.remove()
                                    }
                                }
                            }
                        }
                    ]
                }
            },
            build: {
                sourcemap: mode === 'prod' && command === 'build', //是否构建source map 文件
                outDir: 'dist', //指定输出路径
                assetsDir: 'assets', //指定静态资源存放路径
                chunkSizeWarningLimit: 1000,
                cssCodeSplit: true, //提取css一个文件
                emptyOutDir: true, //打包前先清空原有打包文件
                // 生产情况下清空console
                // minify: 'terser',Vite3需要单独安装插件
                terserOptions: {
                    compress: {
                        drop_console: true,
                        drop_debugger: true
                    },
                    ie8: true,
                    output: { comments: true } // 删除注释
                },
                rollupOptions: {
                    input: {
                        index: path.resolve(__dirname, 'index.html')
                    },
                    compact: true,
                    // 拆分代码,按需加载
                    manualChunks: {
                        vue: ['vue', 'vue-router']
                    },
                    output: {
                        chunkFileNames: 'assets/js/[name]-[hash].js',
                        entryFileNames: 'assets/js/[name]-[hash].js',
                        assetFileNames: 'assets/[ext]/[name]-[hash].[ext]'
                    },
                    brotliSize: false // 不统计
                }
            },
            ...
            
        }
    
    
    
    // tsconfig.json
    {
     "compilerOptions": {
     "target": "ESNext",
     "useDefineForClassFields": true,
     "module": "ESNext",
     "moduleResolution": "Node",
     "strict": true,
     "jsx": "preserve",
     "jsxFactory": "h",
     "jsxFragmentFactory": "Fragment",
     "importHelpers": true,
     "sourceMap": true,
      ...
    
    
     "include": [
     "src/**/*.ts",
     "src/**/*.d.ts",
     "src/**/*.tsx",
     "src/**/*.vue",
     "src/auto-imports.d.ts",
     "./commitlint.config.ts",
     "./config",
     ".eslintrc.js",
      ],
     "exclude": [
     "node_modules",
     "dist",
     "**/*.js"
      ],
     "references": [
        {
     "path": "./tsconfig.node.json"
        }
      ]
    }
    
    
    // components-imports.d.ts
    declare module '@vue/runtime-core' {
      export interface GlobalComponents {
       ...,
       TableCustom: typeof import('./components/tableCustom/index.vue')['default']
       TmsDataPicker: typeof import('./components/TMSBase/tms-data-picker.vue')['default']
       TmsNumberInput: typeof import('./components/TMSBase/tms-number-input.vue')['default']
      }
    }
    
    question 
    opened by gogHeroDream 8
  • chore(deps): bump decode-uri-component from 0.2.0 to 0.2.2

    chore(deps): bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Vue内置组件提示Property '$children' does not exist on type

    Vue内置组件提示Property '$children' does not exist on type

    🧐 Problem Description

    在使用Vue内置组件时提示Property '$children' does not exist on type,但是通过使用v-slots时写入时正常。 求助原因🙏

    💻 Sample code

    我的依赖情况

    {
        "dependencies": {
            "@mdi/font": "7.0.96",
            "@vuepic/vue-datepicker": "3.5.3",
            "@vueuse/core": "9.6.0",
            "axios": "1.2.0",
            "chart.js": "4.0.1",
            "chartjs-adapter-date-fns": "2.0.1",
            "date-fns": "2.29.3",
            "lodash": "4.17.21",
            "roboto-fontface": "*",
            "vue": "3.2.45",
            "vue-chartjs": "4.1.2",
            "vue-router": "4.1.6",
            "vuetify": "3.0.2",
            "webfontloader": "1.6.28"
        },
        "devDependencies": {
            "@types/lodash": "^4.14.191",
            "@types/node": "18.11.10",
            "@types/webfontloader": "1.6.35",
            "@vitejs/plugin-legacy": "2.3.1",
            "@vitejs/plugin-vue": "3.2.0",
            "@vitejs/plugin-vue-jsx": "2.1.1",
            "husky": "8.0.2",
            "lint-staged": "13.0.4",
            "minimist": "^1.2.7",
            "sass": "1.56.1",
            "shelljs": "0.8.5",
            "terser": "5.16.0",
            "typescript": "4.9.3",
            "vite": "3.2.4",
            "vite-plugin-vuetify": "1.0.0",
            "vue-tsc": "1.0.10"
        }
    }
    

    tsconfig

    {
      "compilerOptions": {
        "baseUrl": ".",
        "target": "esnext",
        "useDefineForClassFields": true,
        "allowSyntheticDefaultImports": true,
        "composite": true,
        "module": "esnext",
        "moduleResolution": "node",
        "strict": true,
        "jsx": "preserve",
        "sourceMap": false,
        "resolveJsonModule": true,
        "isolatedModules": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "lib": [
          "esnext",
          "dom"
        ],
        "types": [
          "vuetify"
        ],
        "paths": {
          "@/*": [
            "src/*"
          ]
        },
      },
      "include": [
        "src/**/*.ts",
        "src/**/*.d.ts",
        "src/**/*.tsx",
        "src/**/*.vue",
        "vite.config.ts",
        "colorrc.ts",
        "env.d.ts",
        "@types/**.d.ts",
        "src/layout/base"
      ]
    }
    

    vite.config

    // Plugins
    import vue from "@vitejs/plugin-vue";
    import vueJsx from "@vitejs/plugin-vue-jsx";
    import vuetify from "vite-plugin-vuetify";
    import legacy from "@vitejs/plugin-legacy";
    
    // Utilities
    import { defineConfig } from "vite";
    import { fileURLToPath, URL } from "node:url";
    
    // https://vitejs.dev/config/
    export default defineConfig({
      plugins: [
        vue(),
        vueJsx({ transformOn: true, optimize: true }),
        vuetify({
          autoImport: true,
        }),
        legacy(),
      ],
      build: {
        sourcemap: true,
      },
      define: { "process.env": {} },
      resolve: {
        alias: {
          "@": fileURLToPath(new URL("./src", import.meta.url)),
        },
        extensions: [".js", ".json", ".jsx", ".mjs", ".ts", ".tsx", ".vue"],
      },
      css: {},
    });
    
    

    🚑 Other information

    image

    question 
    opened by McPorkChop 2
  • chore(deps): update dependency ts-loader to v9

    chore(deps): update dependency ts-loader to v9

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | ts-loader | ^8.4.0 -> ^9.4.2 | age | adoption | passing | confidence |


    Release Notes

    TypeStrong/ts-loader

    v9.4.2

    Compare Source

    v9.4.1

    Compare Source

    v9.4.0

    Compare Source

    v9.3.1

    Compare Source

    v9.3.0

    Compare Source

    v9.2.9

    Compare Source

    v9.2.8

    Compare Source

    v9.2.7

    Compare Source

    v9.2.6

    Compare Source

    v9.2.5

    Compare Source

    v9.2.4

    Compare Source

    v9.2.3

    Compare Source

    v9.2.2

    Compare Source

    v9.2.1

    Compare Source

    v9.2.0

    Compare Source

    v9.1.2

    Compare Source

    v9.1.1

    Compare Source

    v9.1.0

    Compare Source

    v9.0.2

    Compare Source

    v9.0.1

    Compare Source

    v9.0.0

    Compare Source

    Breaking changes:

    • minimum webpack version: 5
    • minimum node version: 12

    Changes:


    Configuration

    📅 Schedule: Branch creation - "before 3am on Monday" (UTC), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    🔕 Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, check this box

    This PR has been generated by Mend Renovate. View repository job log here.

    dependencies 
    opened by renovate[bot] 1
Releases(v1.1.1)
A babel plugin that provides jsx syntax for vue3

vue-next-jsx This project has been archived because Vue will have an official version. Vue Next JSX Explorer A babel plugin that provides jsx syntax f

Chunyang Huo 89 Aug 11, 2022
Babel preset for transforming Vue JSX.

babel-preset-vue Babel preset for all Vue plugins. Install npm install -D babel-preset-vue CDN: UNPKG Usage In your .babelrc: { "presets": ["vue"] }

vuejs 85 Dec 19, 2022
TypeScript preset for Babel 7.x supporting Vue.js components written in TS

babel-preset-typescript-vue TypeScript preset for Babel 7.x supporting Vue.js components written in TS. A drop-in replacement for @babel/preset-typesc

Paweł Gabryelewicz 21 Aug 18, 2022
JSX Syntactic Sugar Plugin for Vue Functional Components

DEPRECATED: Check https://github.com/vuejs/jsx instead JSX Functional Components for Vue JSX This babel plugin adds some syntactic sugar to JSX. Usage

Nick Messing 66 May 26, 2022
JSX Syntactic Sugar Plugin for v-model

DEPRECATED: Check https://github.com/vuejs/jsx instead JSX v-model for Vue JSX This babel plugin adds some syntactic sugar to JSX. Usage: npm i babel-

Nick Messing 154 Feb 28, 2022
Jsx-runtime for vue 3

vue-jsx-runtime-examples vue-jsx-runtime examples

doly mood 1 Apr 8, 2022
Vue 3 jsx runtime support.

vue-jsx-runtime Vue 3 jsx runtime support. The background https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html . With new jsx ru

doly mood 10 Dec 2, 2022
CSS encapsulation solution for Vue JSX

babel-plugin-vue-jsx-scoped-css ?? CSS encapsulation solution for Vue JSX About This plugin is used to implement the css scoped effect of template in

minfive 2 Mar 20, 2021
JSX for Vue 3

Babel Plugin JSX for Vue 3.0 To add Vue JSX support. English | 简体中文 Installation Install the plugin with: npm install @vue/babel-plugin-jsx -D Then ad

vuejs 1.5k Jan 3, 2023
Shrimpit 🍤 is a small CLI analysis tool for checking unused JavaScript, JSX & Vue templates ES6 exports in your project.

Shrimpit ?? Shrimpit is a small CLI analysis tool for checking unused JavaScript, JSX & Vue templates ES6 exports in your project. Install npm npm i -

Davy Duperron 260 Nov 29, 2022
Event modifiers syntactic sugar for JSX

Event Modifiers for JSX DEPRECATED: Check https://github.com/vuejs/jsx instead This babel plugin adds some syntactic sugar to JSX. Usage: npm i babel-

Nick Messing 45 Aug 31, 2021
Automatically imports createElement as h when writing JSX and functional syntax that supports only setup() and template refs that supports setup()

babel-preset-vca-jsx Support for automatic import of createElement as h and setup functional component syntax and setup template refs Feature Automati

lululuffy 73 Aug 24, 2022
Internationalization plugin for Vue.js - fluent-vue is Vue.js integration for Fluent.js

Internationalization plugin for Vue.js - fluent-vue is Vue.js integration for Fluent.js

Ivan Demchuk 164 Dec 28, 2022
simple vue plugin to implement underscore

vue-underscore You know Underscore.js is a utility-belt library for JavaScript that provides support for the usual functional suspects (each, map, red

Haluk Keskin 18 Apr 28, 2021
Vue.js plugin that allows you to reference methods on parent classes

vue-super Provides a $super handler for accessing parent vue methods from a subclass. Behaves similarly to python's super implementation. vue-super is

Ryan P Kilby 34 Dec 1, 2022
A Vue.js plugin that protects routes based on user roles. Add your own authentication.

vue-router-user-roles A plugin for Vue.js SPAs that protects routes depending on user role. Add your own authentication. ?? Usage Check out the demo h

Anthony Gore 241 Sep 24, 2022
Component and HTML unique id generation plugin for Vue.js

vue-unique-id Vue.js plugin that generates component-scoped HTML identifiers for use in form inputs, labels, jQuery plugins, etc. This solves the prob

Bertrand Guay-Paquet 47 Nov 23, 2022
A Vue.js plugin to use webworkers in a simply way.

VueWorker A Vue.js plugin to use webworkers in a simply way. Changelog 1.2.1 Highlights: Fix README examples See full changelog here. Why Create and u

Israel Sant'Anna 562 Dec 3, 2022
Vue.js Plugin to facilitate Backbone integration

vue-backbone Vue.js Plugin to facilitate gradual migration from Backbone. Backbone Collections and Models can be safely integrated with Vue instances

Michael Gallagher 44 Dec 21, 2022