Stylable + Vue Example
A basic example of using Stylable and Vue together.
This project uses a simple manual webpack integration with
@stylable/webpack-plugin. It then uses
webpack-dev-server to run the example.
You can see the example running in production mode here.
Note: current version of the
Vue CLIboilerplate 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.
- Clone this repo
- open http://localhost:8080/main in your browser
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
buttons-container.st.css) while remaining functional.
These are then customized externally from the root component,
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