Vue 3 compatibility

[stuta]

What problem does this feature solve?

Test rollup in https://github.com/vuejs/vue-next-webpack-preview -project.

Shows error from src/utils.ts: "File not processed yet".

What does the proposed API look like?

Same, in a new branch.

[znck]

Vue 3 support is work in progress. Check https://github.com/vuejs/rollup-plugin-vue/tree/next

[P-Seebauer]

I had a small look.
Since it is a work in progress, I did not want to raise any issues, but are you interested in some feedback on that branch?

[znck]

Yes, please.

[P-Seebauer]

1. the normal node packaging feels strange, maybe it's just me,
   but getting esm modules to work with nodejs is still kind of a pain.
   Now you have to do the following:

const {default: vue} = require('vue-rollup-plugin');

2. “process is undefined” (more an issue of the rollup output, i'd guess, but it is required to inject the process env somehow to have a running program). There is a plugin, but that one needs some manual labor to only work on javascript files (else you'll inject it into your css too…);

3. (probaly a documentation issue)
   the css needs an extra rollup css plugin, this is awkward because the css-only plugin seems like the wrong choice at first (“i have scss”),
   and is a bit strange to use, when it comes to their output options.

4. Styles are still a wip, I'd guess, but apparently is the template compiler able to take a preprocessLang option (which you could get from the query), the output is fine, but the data-attributre in the templates get's a strange -s prefix then…
   Are you really sure this is the right way to go there? It seems to me that the template compiler is already handling all the cases (lang and scoped) it would lead to four branches. if you do the check on scoped (and the missing one on lang)

Forgot the most important part:
Thank you!!!!! looks really good ♥

[znck]

Try new alpha version: v6.0.0-alpha.1

[P-Seebauer]

Will do! Am in a project right now, but I think next weekend I'll manage.

[ayZagen]

version 6.0.0-alpha.6 doesn't work with typescript in sfc

[ayZagen]

Just posting to inform. Using v6.0.0-alpha-8. It seems that rollup cannot detect compiled sfc blocks as typescript file. If I remove any typescript related syntax it builds successfully. I may be missing some configuration, if that is the case I would be glad to hear it and continue to test.

Following error occurs:

[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
src\Test.vue?vue&type=script&lang=ts (11:29)
 9:         props: {
10:             name: {
11:                 type: String as () => string
                                 ^
12:             }
13:         }

//rollup.config.js
import vue from 'rollup-plugin-vue' // v6.0.0-alpha.8
import typescript from '@rollup/plugin-typescript'  // v7.9.0
import resolve from '@rollup/plugin-node-resolve'; // v7.1.3

export default {
    input: 'src/index.ts',
    output: {
        format: 'umd',
        file: 'dist/bundle.js'
    },
    plugins: [
        vue({}),
        typescript(),
        resolve(),
    ]
}

//tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "moduleResolution": "node",
    "target": "es2015",
    "paths": {
      "vue": ["@vue/runtime-dom"]
    }
  },
  "exclude": [
    "./node_modules"
  ],
  "include": [
    "**/*.ts",
    "**/*.vue"
  ]
}

//Test.vue
<template>
  <h1>Hello {{ name }}</h1>
</template>

<script lang="ts">
    import { defineComponent } from 'vue';

    export default defineComponent({
        props: {
            name: {
                type: String as () => string
            }
        }
    })
</script>

<style scoped>
</style>

//index.ts
import Test from "./Test.vue";
import { createApp } from "vue";

createApp(Test).mount(document.body)

[P-Seebauer]

Works much better now, didn't have that much time to test, but the things I mentioned work smoothly now (tried some scoped scss with some other non-scoped).

[ushironoko]

Just posting to inform. Using v6.0.0-alpha-8. It seems that rollup cannot detect compiled sfc blocks as typescript file. If I remove any typescript related syntax it builds successfully. I may be missing some configuration, if that is the case I would be glad to hear it and continue to test.

[FYI]
It seems to work well with rollup-plugin-typescript2.

[ayZagen]

@ushironoko can u share snippet of configuration ?

[znck]

You can use with @rollup/plugin-typescript too, just you have to provide a filter pattern: typescript({ include: [/\.tsx?$/, /\.vue\?.*?lang=ts/] })

rollup-plugin-typescript2 already includes the correct filter.

P.S. Please send PR to @rollup/plugin-typescript if you could.

[ushironoko]

@ayZagen
https://gist.github.com/ushironoko/cd6bdaf36decc37aa50215cab674490f

There is no special setting. Just use rollup-plugin-typescript2. However, looking at the comments, it doesn't seem to be necessary to use it.

You can use with @ rollup / plugin-typescript too, just you have to provide a filter pattern: typescript ({include: [/.tsx?$/, /.vue?.*?lang=ts/] })

[znck]

@ushironoko I think you're using 2.x compatible version of rollup-plugin-vue.

In current rollup-plugin-vue alpha, the final .ts is missing

[ushironoko]

@znck That's right. This snippet uses @ vue / composition-api. I didn't know that it doesn't work on Vue3. Thanks for pointing out.

[ayZagen]

@znck I tried with latest versions and with both rollup-plugin-typescript2 and @rollup/plugin-typescript. Still couldn't make it work.

I have created a simple repo for it, you can see it at here

[znck]

ayZagen/vue3-rollup-test#1

[rafapaulin]

Hey guys. I am testing this plugin on a lib I am developing. I understand it is still WIP, but I'd like to know If i could as for a little help, just to understand if it is something that was not yet addressed, or if i am doing something wrong.

I am using vue3 + class components do develop the lib. If i compile my components without the <style lang="sass"> block, everything works like a charg... but if I include it, with even the simplest style, it breaks.

this is the error I am getting: https://imghub.io/i/NoO0e

this is my rollup.config.js

import typescript from 'rollup-plugin-typescript';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import resolve from '@rollup/plugin-node-resolve';
import vue from 'rollup-plugin-vue';
import sass from 'rollup-plugin-sass';
import packageJson from './package.json';
import copy from 'rollup-plugin-copy';

export default [
    {
        input: './src/index.ts',
        output: {
            format: 'esm',
            file: packageJson.module,
            sourcemap: true
        },
        plugins: [
            vue({
                preprocessStyles: true,
                css: false,
                compileTemplate: true,
            }),
            typescript(),
            resolve(),
            peerDepsExternal(),
            sass(),
            copy({
                targets: [
                    { src: 'src/sass', dest: 'lib' },
                ]
            }),
        ]
    },
];

and this is the component (template ommited)

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import { Prop } from 'vue-property-decorator';
import { Modifiers } from '../../../decorators';

@Options({ name: 'Button' })
export default class Button extends Vue {
    @Prop({ type: String, default: 'Button' }) label!: string;
    @Prop({ type: String, default: 'button' }) role!: string;
    @Prop({ type: String, default: 'button' }) type!: string;
    @Prop({ type: String, default: null }) subtitle!: string | null;
    @Prop({ type: String, default: null }) icon!: string | null;

    @Modifiers([
        'primary', 'blue', 'darkGreen', 'green',
        'orange', 'pink', 'red', 'teal', 'yellow',
        'round', 'outline', 'loading', 'big'
    ])
    private modifiers!: string[];

    get classes() {
        const classes: {[key: string]: boolean} = {};

        this.modifiers.forEach((mod: string) => classes[mod] = (this as any)[mod]);

        return classes;
    }

    get iconClass() {
        return { [`fa-${this.icon}`]: !!this.icon };
    }
};
</script>

<style lang="sass">
.rg-button
    align-items: center
</style>

thanks!

[relief-melone]

@rafapaulin

Usually you shouldn't need the sass rollup plugin. Have you installed the regular "sass" package in your project?

[relief-melone]

Ok after hours I have finally found a rollup config that works for me with vue3. Little addition. I am using pug so if you don't you may skip that one. Wanted to include it though because if you are using pug it will fail without the plugin. A little strange since I didn't need it in vue2 but rollup seems to be sorcery anyways 🧙.

Now my tsconfig might contain some unnecessary stuff. It's more or less what I found suiting for alot of my projects, so feel free to clear out what you don't want ;)

versions

    "vue": "^3.0.0"
    "@rollup/plugin-commonjs": "^17.1.0",
    "@rollup/plugin-node-resolve": "^11.2.0",
    "rollup": "^2.40.0",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-pug": "^1.1.1",
    "rollup-plugin-typescript2": "^0.30.0",
    "rollup-plugin-vue": "^6.0.0-beta.10",

rollup.config.js

import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from 'rollup-plugin-typescript2';
import vue from 'rollup-plugin-vue';
import css from "rollup-plugin-css-only";
import pug from "rollup-plugin-pug"

import packageJson from './package.json';

export default {
  input: 'src/index.ts',
  output: [
    {
      format: 'cjs',
      file: packageJson.main,
      sourcemap: true
    },
    {
      format: 'esm',
      file: packageJson.module,
      sourcemap: true
    }
  ],
  plugins: [
    peerDepsExternal(), 
    resolve(), 
    commonjs(),
    pug(),
    css(),
    vue(),
    typescript({ tsconfig: 'tsconfig.json' }), 
  ]
};

tsconfig.json

{  
  "compilerOptions": {
    "declarationDir": "lib",
    "declaration": true,
    "rootDir": "src",
    "target": "es5",
    "module": "es6",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "Node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "mocha",
      "chai",
    ],
    "typeRoots": [
      "./node_modules/@types",
      "./src/types",
    ],
    "paths": {
      "@/*": [
        "src/*"
      ],
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules/**",
    "tests/**"
  ]
}

package.json

//...
"scripts": {
    "build": "rm -rf lib/ && rollup -c",
   },
"main": "lib/index.js",
"module": "lib/index.esm.js",
"es2015": "lib/index.js",
//...

[jessielaf]

I am trying to use it with version ^6.0.0-beta.10. But I keep getting an error on my v-if.

[!] (plugin commonjs) SyntaxError: Unexpected token (3:16) in C:\Users\Jessie\projects\vue-scan-field\src\ScanField.vue?vue&type=template&id=8dd6e358&lang.js
src\ScanField.vue?vue&type=template&id=8dd6e358&lang.js (3:16)
1:
2:   div
3:     component(v-if="componentName" :is="componentName" v-model="value" v-bind="parse($attrs, field.attributes.element)" :id="id" :name="id" :label="label")
                   ^

The arrow is pointing at my v-if. Does anybody know why this is happening?

[siimorasmae]

@jessielaf I got rid of that issue by moving vue() above commonjs().