NASA Proceeds to Mars

    @appjumpstart/vue-styletron

    5.0.1 • Public • Published

    vue-styletron

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

    npm page Join the community on Spectrum

    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>

    Server-Side Rendering (SSR)

    Note: If you are using webpack-node-externals in the Webpack config make sure to add '@appjumpstart/vue-styletron' to the whitelist.

     

    AppJumpstart

    Install

    npm i @appjumpstart/vue-styletron

    DownloadsWeekly Downloads

    1

    Version

    5.0.1

    License

    ISC

    Unpacked Size

    9.53 kB

    Total Files

    6

    Last publish

    Collaborators

    • ianwalter