@appjumpstart/vue-styletron NPM

vue-styletron

Use the Styletron CSS-in-JS library with Vue.js

About

This is a very small amount of code to make Styletron easier to use within Vue.js components.

Installation

npm install @appjumpstart/vue-styletron --save

Usage

Client:

import VueStyletron from '@appjumpstart/vue-styletron'

// Use VueStyletron as a Vue plugin.
Vue.use(new VueStyletron())

Server (optional, for SSR):

const VueStyletron = require('@appjumpstart/vue-styletron/server')

// Create the VueStyletron instance.
const vueStyletron = new VueStyletron()

// Use VueStyletron as a Vue plugin.
Vue.use(vueStyletron)

// Use a Vue.js renderer to render your Vue.js app to a HTML string.
// https://ssr.vuejs.org/guide/bundle-renderer.html
let html = renderer.renderToString(context)

// Insert the stylesheet that Styletron generated when the app was rendered.
html = vueStyletron.insertStyles(html)

// This is just an example of sending an HTML response with Express.
res.type('text/html').send(html)

NOTE: You'll also need to insert a tag into your HTML template which defaults to {styles} but can be configured as the 3rd parameter to insertStyles.

Component:

<template>
  <div :class="`${styles.hello} mr-5`">
    Hello!
  </div>
</template>

<script>
export default {
  styles: { hello: { fontSize: '48px', textAlign: 'center' } }
}
</script>

Output:

<!DOCTYPE html>
<html>
  <head>
    <title>Test Template</title>
    <style class="_styletron_hydrate_">.ae{font-size:48px}.af{text-align:center}</style>
  </head>
  <body>
    <div data-server-rendered="true" class="ae af mr-5">
      Hello!
    </div>
  </body>
</html>