A basic example of using Stylable and Vue together.

This project uses a webpack configuration with vue-loader (uses @vue/compiler-sfc, also installed) and @stylable/webpack-plugin.

Deployed production mode can be seen here.

Note: current version of the Vue CLI boilerplate uses webpack 3.x, and does not integrate with Stylable. Once the ecosystem moves to webpack 4.x, we can consider a more encompassing integration specifically for Vue.

1. Clone this repository.
2. yarn
3. yarn start

This project shows a custom component, CustomizableButton being rendered three times and receiving different customizations for each instance.

Each component defines the bare minimum styling API for itself (see customizable-button.st.css and buttons-container.st.css) while remaining functional. These are then customized externally from the root component, app (see app.st.css).

If you're using VS Code as your IDE, we strongly recommend installing our stylable-intelligence extension.

It provides a typed CSS experience including auto completions, hinting, diagnostics and more.

This has been one of my first (and admittedly lovely) interactions with Vue. We will gladly accept PRs that will bring this project in-line with the community standards for a Vue project. -Tom