https://github.com/askdkc/svelte-multi-lang
Svelteで多言語対応するサンプル
https://github.com/askdkc/svelte-multi-lang
Last synced: 5 months ago
JSON representation
Svelteで多言語対応するサンプル
- Host: GitHub
- URL: https://github.com/askdkc/svelte-multi-lang
- Owner: askdkc
- License: mit
- Created: 2024-12-03T02:18:19.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-09-10T04:52:03.000Z (10 months ago)
- Last Synced: 2025-09-10T08:34:00.478Z (10 months ago)
- Language: CSS
- Size: 146 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Svelteの多言語対応
## このサンプルの使い方
```bash
git clone git@github.com:askdkc/svelte-multi-lang.git
cd svelte-multi-lang
npm i
npm run dev
```
http://localhost:5173 にアクセス
## 新規プロジェクトでSvelteに多言語対応を導入する流れ
[svelte-i18n](https://github.com/kaisermann/svelte-i18n/)を使って`Svelte`を多言語対応します
## svelte-i18nのインストール
```bash
npm i svelte-i18n
```
## 言語ファイルの作成
下記のような言語ファイルを作成します
- `src/lib/en.json`
- `src/lib/ja.json`
## 初期化
[ドキュメント](https://github.com/kaisermann/svelte-i18n/blob/main/docs/Getting%20Started.md)に従って初期化ファイルを作ります
- `src/i18n.js`
## App.svelteに読み込んで使用
下記のような感じで読み込んで利用します
```js
// (略)
import './i18n.js' // i18n設定ファイルをインポート
import { _, locale } from 'svelte-i18n' // i18nで使用する関数をインポート
// 言語を変更機能
function changeLanguage(lang) {
locale.set(lang);
}
```
```html
changeLanguage('en')}>English
changeLanguage('ja')}>日本語
```