Skip to content

Webpack loader

Deprecated. Use unplugin-fluent-vue instead.

fluent-vue-loader allows you to use custom blocks in your single file components.

Example

vue
<template>
  <div>
    <div>{{ $t('hello-user', { userName }) }}</div>
    <div>{{ $t('shared-photos', { userName, photoCount, userGender }) }}</div>
  </div>
</template>

<fluent locale="en">
# Simple things are simple.
hello-user = Hello, {$userName}!

# Complex things are possible.
shared-photos =
  {$userName} {$photoCount ->
     [1] added one photo
    *[other] added {$photoCount} new photos
  } to {$userGender ->
     [male] his stream
     [female] her stream
    *[other] their stream
  }.
</fluent>

Instalation

  1. Install fluent-vue-loader package
shell
pnpm add fluent-vue-loader -D
shell
yarn add fluent-vue-loader --dev
shell
npm install fluent-vue-loader --save-dev
  1. Configure Webpack
js
module.exports = {
  // ...
  module: {
    rules: [
      {
        resourceQuery: /blockType=fluent/,
        loader: 'fluent-vue-loader',
      },
      // ...
    ],
  },
  // ...
}

MIT Licensed