Version: 1.x

Svelte Integration

If you're using the @vime-js/complete package inside Svelte then you'll need to do a little extra setting up. For all other packages you don't need to do anything special, compile it the same as you'd compile any other Svelte component.

There are setup instructions below for:

Rollup
Webpack

Rollup#

In addition to your usual setup you'll need to do the following.

info

If you want to start an application quickly then checkout the official Svelte Rollup template.

Install#

NPM
Yarn

npm install svelte-preprocess node-sass @rollup/plugin-replace --save-dev

Configure#

Extend your Rollup configuration with the following

import replace from '@rollup/plugin-replace';
import sveltePreprocess from 'svelte-preprocess';

export default {
  // ...
  svelte({
    // ...
    preprocess: sveltePreprocess()
  }),
  replace({ 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) })
}

Webpack#

In addition to your usual setup you'll need to do the following.

info

If you want to start an application quickly then checkout the official Svelte Webpack template.

Install#

NPM
Yarn

npm install svelte-preprocess node-sass --save-dev

Configure#

Extend your Webpack configuration with the following

const sveltePreprocess = require('svelte-preprocess');
const EnvironmentPlugin = require('webpack').EnvironmentPlugin;

module.exports = {
  // ...
  module: {
    // ...
    rules: [
      {
        test: /\.(html|svelte)$/,
        exclude: /node_modules/,
        use: {
          loader: 'svelte-loader',
          options: {
            // ...
            preprocess: sveltePreprocess(),
          },
        },
      },
      // ...
    ],
  },
  plugins: [
    new EnvironmentPlugin({
      NODE_ENV: 'development',
    }),
    // ...
  ],
};