vite-plugin-pug-i18n
Advanced tools
A vite plugin with support of rendering multiple pages based on pugjs templates. Plugin also support i18n with proper directory route structure creation.
npm i -D vite-plugin-pug-i18n
Plugin Options is an object that expect's next properties:
Note: __ and lang are reserved locals. First is translation function that will be provided to pug, second is current language code. This locals are not provided if langs option are null or undefined.
Let's assume you have your pug pages files in src/pages directory of your project. While language .json files are located in src/language. With 2 language available there - en and fr. Then you'll need to provide next options to the plugin:
// vite.config.js
import { defineConfig } from 'vite'
import { resolve } from 'path'
import vitePluginPugI18n from 'vite-plugin-pug-i18n'
export default defineConfig({
plugins: [
vitePluginPugI18n({
pages: {
baseDir: resolve(__dirname, 'src/pages')
},
langs: {
baseDir: resolve(__dirname, 'src/language')
},
locals: {},
options: {},
})
]
})
That will generate next static html files structure on build for you in dist:
dist/en/index.html
dist/en/test-route/test-page.html
dist/fr/index.html
dist/fr/test-route/test-page.html
In case if langs option will not be provided or will be null, then static html pages will be generated without language support:
dist/index.html
dist/test-route/test-page.html
You still can manually provide locals to pug with or without langs option. But keep in mind that plugin reserved translation function name __(two underscores) in pug locals (that is how proper translation function is passed to pug), which can be overriden by your locals. Same true for reserved propert name lang.
There is no index.html in dist when the language mode is used. You can create it manually in vite's public directory, which will then be copied to dist during build. And add some redirect custom code to it. So it's up to developer which mechanism to use to detect user's language on client side(or server) and auto-redirect to proper url after.
Root index.html example:
<html>
<body>
<script>
window.location="/en";
</script>
</body>
</html>
Plugin is using i18next as a translation function. Language filename must have next format [language-code].json, and the file structure is:
en.json
{
"hello": "Hello!"
}
So it is key/value json format. So in pug template you can use it like this:
// index.pug
p #{__('hello')}
You can use *.js files in pug that will be processed as vite assets and properly replaced, example:
// index.pug
p #{__('hello')}
script(type='module', src='src/main.js')
Where main.js is normal ESMAScript that will be compiled by vite as asset. Within which you can import any sass, scss, css files.
In a translation mode next locals exposed to pug:
FAQs
Vite plugin to build static website with pug and i18n support
The npm package vite-plugin-pug-i18n receives a total of 15 weekly downloads. As such, vite-plugin-pug-i18n popularity was classified as not popular.
We found that vite-plugin-pug-i18n demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PEP 770 proposes adding SBOM support to Python packages to improve transparency and catch hidden non-Python dependencies that security tools often miss.
Security News
Socket CEO Feross Aboukhadijeh discusses open source security challenges, including zero-day attacks and supply chain risks, on the Cyber Security Council podcast.
Security News
Research
Socket researchers uncover how threat actors weaponize Out-of-Band Application Security Testing (OAST) techniques across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.