Rollup-plugin-vue: Non-trivial TS/Vue/SCSS cookbook example using @latest

[davestewart]

What problem does this feature solve?

Allows people to easily build a non-trivial Vue plugin, e.g. an alert component.

The existing cookbook examples work - but use out of date dependencies and don't work when upgraded, and there simply appear to be no complete examples on the web.

What does the proposed API look like?

Includes:

• TypeScript
• nested SCSS with imported variables
• components in subfolders
• exported TS helper functions, such as alert()
• helper and component exported from index.ts
• a working tsconfig.json
• exported *.d.ts files

Additionally:

• imported scss files trigger reload when using rollup -w
• import of .vue files without having to add .vue
• optional sourcemaps

[mesqueeb]

+1 !!

[przemkow]

Hi guys,
I created for you this repo with an example of boilerplate I'm using for libs/components development:
https://github.com/przemkow/rollup-vue-advanced-example

The biggest different between example from docs and this implementation is replacing @rollup/plugin-typescript (aka rollup-plugin-typescript) with rollup-plugin-typescript2 which I fund in Vue 3 rollup configuration.

I think it covers everything except:

• import of .vue files without having to add .vue
• optional sourcemaps
• output as IIFE (I always use those components in vue-cli / Nuxt app so I never tested that)

Could you look at this repo and let me know if it covers your use cases? If everything works fine maybe I will open PR with docs update basing on that implementation.

[davestewart]

Hey @przemkow - thanks!

I'll take a look at some point in the next day or so.

I was having issues with duplicated SCSS so I will need to check my current bundling output to see if that is still a problem, and if so, whether it's me or the plugin.

Good work!

[DrMabuse23]

this works with vue-property-decorator ?

[przemkow]

@DrMabuse23 I think so, after installing that dependency and enabling experimentalDecorators in tsconfig.json everything should work fine.

[przemkow]

@davestewart I don't know if this will be still useful for you but I will leave it here - maybe it will solve someone's else issue :)

We resolved a problem with duplicated CSS styles by transforming generated CSS with postcss and cssnano before they are saved.
https://github.com/przemkow/rollup-vue-advanced-example/blob/master/rollup.config.js#L55

[davestewart]

He's back!

Haven't looked at this project for a while now (can't remember what state it's in, even) but really appreciate you returning to drop your learnings here!