vite-plugin-preview

Installation

yarn add -D @aki77/vite-plugin-preview

// vite.config.ts
import { PreviewPlugin } from '@aki77/vite-plugin-preview'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [PreviewPlugin(/*options*/)],
})

Usage

yarn vite --open /__preview

Options Examples

Chakra UI + Next.js

// vite.config.ts
import path from 'path'
import { PreviewPlugin } from '@aki77/vite-plugin-preview'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  resolve: {
    alias: [
      {
        find: '@/',
        replacement: `${path.resolve(__dirname, 'src')}/`,
      },
    ],
  },
  define: {
    'process.env': {},
  },
  plugins: [
    react(),
    PreviewPlugin({
      pattern: './src/**/*.preview.tsx',
      wrapper: path.resolve(__dirname, '__preview__/Wrapper.tsx'),
      framework: 'react',
    }),
  ],
})

// __preview__/Wrapper.tsx
import { Center, ChakraProvider } from '@chakra-ui/react'
import React, { ReactNode, VFC } from 'react'
import { chakraTheme } from '../src/chakraTheme'

type WrapperProps = {
  children: ReactNode
}

const Wrapper: VFC<WrapperProps> = ({ children }) => {
  return (
    <ChakraProvider theme={chakraTheme}>
      <Center p="4">
        {children}
      </Center>
    </ChakraProvider>
  )
}

export default Wrapper

Vue3

//vite.config.ts
import path from 'path'
import { PreviewPlugin } from '@aki77/vite-plugin-preview'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  resolve: {
    alias: [
      {
        find: '@/',
        replacement: `${path.resolve(__dirname, 'src')}/`,
      },
    ],
  },
  plugins: [
    PreviewPlugin({
      pattern: './src/**/*.preview.vue',
      head: '@/previews/head',
      wrapper: '@/previews/Wrapper.vue',
      framework: 'vue',
    }),
    vue(),
  ],
})

// src/previews/head.ts
import '@/stylesheets/main.scss'

// src/previews/Wrapper.vue
<template>
  <div class="p-4">
    <slot></slot>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({})
</script>

Vue2

//vite.config.ts
import path from 'path'
import { PreviewPlugin } from '@aki77/vite-plugin-preview'
import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'

export default defineConfig({
  resolve: {
    alias: [
      {
        find: '@/',
        replacement: `${path.resolve(__dirname, 'src')}/`,
      },
    ],
  },
  plugins: [
    PreviewPlugin({
      pattern: './src/**/*.preview.vue',
      head: '@/previews/head',
      wrapper: '@/previews/Wrapper.vue',
      framework: 'vue2',
    }),
    createVuePlugin(),
  ],
})

// src/previews/head.ts
import VueCompositionApi from '@vue/composition-api'
import Vue from 'vue'

import '@/stylesheets/main.scss'

Vue.use(VueCompositionApi)

// src/previews/Wrapper.vue
<template>
  <div class="p-4">
    <slot></slot>
  </div>
</template>

<script lang="ts">
import { defineComponent } from '@vue/composition-api'

export default defineComponent({})
</script>