Non-trivial TS/Vue/SCSS cookbook example using @latest

vuejs / rollup-plugin-vue

Roll .vue files

https://vuejs.github.io/rollup-plugin-vue

MIT License

843 stars 148 forks source link

Non-trivial TS/Vue/SCSS cookbook example using @latest #343

Open davestewart opened 4 years ago

davestewart commented 4 years ago

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 commented 4 years ago

+1 !!

przemkow commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

this works with vue-property-decorator ?

przemkow commented 4 years ago

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

przemkow commented 3 years ago

@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 commented 3 years ago

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!