Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/srcdev/nuxt3-pinia-i18n-storybook
Starter kit for Nuxt3, Pinia, i18n, Vitest and Storybook.
https://github.com/srcdev/nuxt3-pinia-i18n-storybook
nuxt3 pinia-vuejs storybook vitest vue-i18n
Last synced: about 2 months ago
JSON representation
Starter kit for Nuxt3, Pinia, i18n, Vitest and Storybook.
- Host: GitHub
- URL: https://github.com/srcdev/nuxt3-pinia-i18n-storybook
- Owner: srcdev
- License: mit
- Created: 2023-02-10T15:48:15.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-11T21:39:56.000Z (10 months ago)
- Last Synced: 2024-04-12T02:35:13.151Z (10 months ago)
- Topics: nuxt3, pinia-vuejs, storybook, vitest, vue-i18n
- Language: Vue
- Homepage: https://nuxt3-pinia-i18n-storybook.vercel.app
- Size: 32 MB
- Stars: 15
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Starter kit for Nuxt3, Pinia, i18n, and Storybook
Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
## VS Code configuration
Settings and extensions will be automatically suggested.
Need to take over inbuilt TS checking to use Volar for Vue.
### Recommanded steps to have Vue Language Features (Volar) installed with typescript support
Ref:
- In extension search box, search: @builtin typescript
- disable "TypeScript and JavaScript Language Features" only inside active vue 3 workspaces
- In extension search box, search: Vue Language Features (volar) and install
- Reload VS Code, takeover mode should
## Still in progress
- ~Install i18n~ Done
- ~Storybook i18n integration~ Done
- ~Install Pinia~ Done
- ~Storybook i18n Pinia~ Done
## Setup
Make sure to install the dependancies:
### Install Errors
If `npm install` exits with errors for peer dependancies in Vue packages:
- Remove storybook package entries from `package.json`
- Run the following package installs manually.
```bash
npm install --save-dev @storybook/addon-a11y @storybook/addon-actions @storybook/addon-essentials @storybook/addon-interactions @storybook/addon-links @storybook/testing-library @storybook/vue3 @storybook/vue3-vite react react-dom storybook storybook-i18n
```
## Setup cert for localhost (OSx)
Other OS's see [mkcert git repo](https://github.com/FiloSottile/mkcert)
```node
brew install mkcert
```
then
```node
mkcert localhost
```
- locate 2 news files created by `mkcert` (localhost.pem and localhost-key.pem)
- create new folder in root of website `/certs/`
- Copy these 2 files into new dir
then update the `dev` script in package.json
```node
"dev": "NODE_TLS_REJECT_UNAUTHORIZED=0 nuxt dev --https --ssl-cert ./certs/localhost.pem --ssl-key ./certs/localhost-key.pem --dotenv .env",
```
#### Storybook errors with duplicate templates
Delete one of the template folders located within `~/node_modules/@storybook/vue3/template/cli`
```bash
# yarn
yarn install
# npm
npm install
# pnpm
pnpm install
```
## Development Server
Start the development server on
If using **nvm** set to use latest version of Node: `nvm use node`
```bash
npm run dev
```
## Production
Build the application for production:
```bash
npm run build
```
Locally preview production build:
```bash
npm run preview
```
## Running Storybook
Due to Storybook not fully supporting latest version on NPM, requires node v16.19.0 (npm v8.19.3)
Shoutout to [BudiSalah](https://github.com/BudiSalah) for their [suggestions](https://github.com/storybookjs/storybook/issues/20312#issuecomment-1417098012) on installing Storybook with Nuxt3/Vite
```bash
nvm use
npm run storybook
```
Upgrade Storybook to lates version
```bash
npx storybook@latest upgrade
```
### Known Storybook issue (to be resolved)
- Nuxt3 can import the stores directory so we don't have to import within each instance it's to be used. (`imports: { dirs: ["stores"]}`). Storybook as currently setup does not support this and each store has to be imported manually. This may not be a Storybook issue just I haven't figured out how to do this yet.
## Other references
- Handy matrix of common [viewports on YesViz device insights](https://yesviz.com/viewport)
## Updates
- updated: `"storybook": "node fixStorybookPackageJson.js && storybook dev -p 6006",` to `"storybook": "storybook dev -p 6006",` Latest version of Storybook (7.6.7) appears to have fixed previous start issue. Leaving `fixStorybookPackageJson.js` for time being until fix is definately stable.
- Recent nuxt package upgrade - remove auto import methods - now internal