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
- 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
- Configure Webpack
js
module.exports = {
// ...
module: {
rules: [
{
resourceQuery: /blockType=fluent/,
loader: 'fluent-vue-loader',
},
// ...
],
},
// ...
}