Examples

These examples cover most common or interesting use cases, and also progressively explain more complex detail. Our goal is to move beyond a simple introductory example, and demonstrate concepts that are more widely applicable, as well as some caveats to the approach.

Minimal

rollup-plugin-vue ships as zero config solution to package .vue files.

import vue from 'rollup-plugin-vue'

export default {
  input: 'src/MyComponent.vue',
  output: {
    format: 'esm',
    file: 'dist/MyComponent.js'
  },
  plugins: [
    vue()
  ]
}

Source: cookbook/minimal

Extract CSS

Setting { css: false } converts <style> blocks to import statements so style plugins like rollup-plugin-css-only can extract styles in .vue files.

import vue from 'rollup-plugin-vue'
import css from 'rollup-plugin-css-only'

export default {
  input: 'src/MyComponent.vue',
  output: {
    format: 'esm',
    file: 'dist/MyComponent.js'
  },
  plugins: [
    css(),
    vue({ css: false })
  ]
}

Source: cookbook/extract-css

Typescript

import vue from 'rollup-plugin-vue'
import typescript from 'rollup-plugin-typescript'

export default {
  input: 'src/MyComponent.vue',
  output: {
    format: 'esm',
    file: 'dist/MyComponent.js'
  },
  external: ['vue'],
  plugins: [
    typescript({
      tsconfig: false,
      experimentalDecorators: true,
      module: 'es2015'
    }),
    vue()
  ]
}

Source: cookbook/typescript-simple

SSR

import vue from 'rollup-plugin-vue'

export default {
  input: 'src/MyComponent.vue',
  output: {
    format: 'esm',
    file: 'dist/MyComponent.js'
  },
  plugins: [
    vue({ template: { optimizeSSR: true } })
  ]
}

Source: cookbook/ssr

Component Library

import vue from 'rollup-plugin-vue'

export default [
  // ESM build to be used with webpack/rollup.
  {
    input: 'src/index.js',
    output: {
      format: 'esm',
      file: 'dist/library.esm.js'
    },
    plugins: [
      vue()
    ]
  },
  // SSR build.
  {
    input: 'src/index.js',
    output: {
      format: 'cjs',
      file: 'dist/library.ssr.js'
    },
    plugins: [
      vue({ template: { optimizeSSR: true } })
    ]
  },
  // Browser build.
  {
    input: 'src/wrapper.js',
    output: {
      format: 'iife',
      file: 'dist/library.js'
    },
    plugins: [
      vue()
    ]
  }
]

Source: cookbook/library

# Examples

# Minimal

# Extract CSS

# Typescript

# SSR

# Component Library

Examples

Minimal

Extract CSS

Typescript

SSR

Component Library