Vue Lim

Make Vue easier to use.

Lim means 'Less is More'

Playground | React-Lim | 中文

A Simple Sample

<script setup lim>
let count = 0;
const increase = ()=>{
  count ++;
}
</script>
<template>
  <button @click="increase">count is {{ count }}</button>
</template>

Quick Use

npm create lim

then choose vue-lim

Install Use

npm i vue-lim

Vite

import { defineConfig } from 'vite'
import lim from 'vue-lim/vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [lim(), vue()],
  // ...
})

Rollup

import lim from 'vue-lim/rollup'
export default {
    plugins: [
        lim(),
        // Introduce vue related plug-ins by yourself
    ]
};

Esbuild

import lim from 'vue-lim/esbuild'
import { build } from 'esbuild';

build({
    plugins: [
        lim(),
        // Introduce vue related plug-ins by yourself
    ],
});

Webpack

module.exports = {
    module: {
        rules: [{
            test: /(\.vue)$/,
            loader: 'vue-lim/webpack',
            exclude: /node_modules/
        }]
        // Introduce vue related loaders by yourself
    }
}

Other

Compile

When using .lim.vue as the file suffix, lim compilation will be enabled

When using only .vue, you need to add lim attribute on script tag to enable lim compilation

<script setup lim>
    // ...
</script>

Compile Api

import { transformVue } from 'vue-lim';
console.log(transformVue(`// some vue code`));

This API can be used in a web environment

<script src='https://cdn.jsdelivr.net/npm/vue-lim'></script>
<script>
console.log(VueLim.transformVue(`// some vue code`));
</script>