├── .github
    ├── CONTRIBUTING.md
    ├── ISSUE_TEMPLATE
    │   └── bug_report.md
    ├── PULL_REQUEST_TEMPLATE.md
    └── workflows
    │   └── deploy-gh-pages.yml
├── .gitignore
├── .vuepress
    ├── config.js
    ├── public
    │   ├── analyzer.png
    │   ├── android-chrome-192x192.png
    │   ├── android-chrome-512x512.png
    │   ├── apple-touch-icon.png
    │   ├── architecture.jpg
    │   ├── favicon-16x16.png
    │   ├── favicon-32x32.png
    │   ├── favicon.ico
    │   ├── logo.png
    │   ├── manifest.json
    │   └── v5
    │   │   ├── new-rest-api.gif
    │   │   ├── vue-box.png
    │   │   ├── vue-columns.png
    │   │   ├── vue-inline.png
    │   │   └── vue-stack.png
    └── styles
    │   ├── index.styl
    │   └── palette.styl
├── CODE_OF_CONDUCT.md
├── LICENSE
├── README.md
├── en
    ├── README.md
    ├── v4
    │   ├── FAQ.md
    │   ├── README.md
    │   ├── deep_dives
    │   │   ├── build.md
    │   │   ├── design-system.md
    │   │   ├── i18n.md
    │   │   ├── npm-scripts.md
    │   │   ├── update.md
    │   │   └── vuex.md
    │   ├── guide
    │   │   ├── clean-up.md
    │   │   ├── cli.md
    │   │   ├── contribute.md
    │   │   ├── install.md
    │   │   ├── run.md
    │   │   └── test.md
    │   └── introduction.md
    └── v5
    │   ├── README.md
    │   ├── guide
    │       ├── community-and-support.md
    │       ├── concepts.md
    │       ├── design-system.md
    │       ├── development.md
    │       ├── getting-started.md
    │       └── introduction.md
    │   └── tutorials
    │       ├── i18n.md
    │       ├── layout-components.md
    │       └── theming.md
├── package-lock.json
└── package.json


/.github/CONTRIBUTING.md:
--------------------------------------------------------------------------------
  1 | # Contributing
  2 | 
  3 | We would love for you to contribute and help make it even better
  4 | than it is today! As a contributor, here are the guidelines we would like you
  5 | to follow:
  6 | 
  7 | - [Question or Problem?](#question)
  8 | - [Issues and Bugs](#issue)
  9 | - [Feature Requests](#feature)
 10 | - [Submission Guidelines](#submit)
 11 | - [Coding Rules](#rules)
 12 | - [Commit Message Guidelines](#commit)
 13 | 
 14 | ## <a name="question"></a> Got a Question or Problem?
 15 | 
 16 | Please, do not open issues for the general support questions as we want to keep GitHub issues for bug reports and feature requests.
 17 | 
 18 | ## <a name="issue"></a> Found an Issue?
 19 | 
 20 | If you find a bug in the source code or a mistake in the documentation, you can help us by
 21 | [submitting an issue](#submit-issue) to our [GitHub Repository][github]. Even better, you can
 22 | [submit a Pull Request](#submit-pr) with a fix.
 23 | 
 24 | ## <a name="feature"></a> Want a Feature?
 25 | 
 26 | You can _request_ a new feature by [submitting an issue](#submit-issue) to our [GitHub
 27 | Repository][github]. If you would like to _implement_ a new feature, please submit an issue with
 28 | a proposal for your work first, to be sure that we can use it.
 29 | 
 30 | First open an issue and outline your proposal so that it can be
 31 | discussed. This will also allow us to better coordinate our efforts, prevent duplication of work,
 32 | and help you to craft the change so that it is successfully accepted into the project.
 33 | 
 34 | **All features require a proper design and review by team members and product owners.** Before starting work, you might want to
 35 | discuss with us to figure out:
 36 | 
 37 | - Is this something we want?
 38 | - What's the impact?
 39 | 
 40 | Answering those questions first in the request might help us make a decision.
 41 | 
 42 | ## <a name="submit"></a> Submission Guidelines
 43 | 
 44 | ### <a name="submit-issue"></a> Submitting an Issue
 45 | 
 46 | Before you submit an issue, please search the issue tracker, maybe an issue for your problem already exists and the discussion might inform you.
 47 | 
 48 | We want to fix all the issues as soon as possible, but before fixing a bug we need to reproduce and confirm it. Having a reproducible
 49 | scenario gives us wealth of important information without going back & forth to you with additional questions.
 50 | 
 51 | You can file new issues by filling out our [new issue form](https://github.com/vuesion/packages/issues/new).
 52 | 
 53 | ### <a name="submit-pr"></a> Submitting a Pull Request (PR)
 54 | 
 55 | Before you submit your Pull Request (PR) consider the following guidelines:
 56 | 
 57 | - Search [GitHub](https://github.com/vuesion/packages/pulls) for an open or closed PR
 58 |   that relates to your submission. You don't want to duplicate effort.
 59 | - Make your changes in a new git branch:
 60 | 
 61 |   ```shell
 62 |   git checkout -b my-fix-branch
 63 |   ```
 64 | 
 65 | - Create your patch, **including appropriate test cases**.
 66 | - Run the full test suite,
 67 |   and ensure that all tests pass.
 68 | - Commit your changes using a descriptive commit message that follows our
 69 |   [commit message conventions](#commit). Adherence to these conventions
 70 |   is necessary because release notes are automatically generated from these messages.
 71 | 
 72 |   ```shell
 73 |   git commit -a
 74 |   ```
 75 | 
 76 |   Note: the optional commit `-a` command line option will automatically "add" and "rm" edited files.
 77 | 
 78 | - Push your branch to GitHub:
 79 | 
 80 |   ```shell
 81 |   git push origin my-fix-branch
 82 |   ```
 83 | 
 84 | - In GitHub, send a pull request to `packages:master`.
 85 | - If we suggest changes then:
 86 | 
 87 |   - Make the required updates.
 88 |   - Re-run the test suites to ensure tests are still passing.
 89 |   - Rebase your branch and force push to your GitHub repository (this will update your Pull Request):
 90 | 
 91 |     ```shell
 92 |     git rebase -i
 93 |     git push -f
 94 |     ```
 95 | 
 96 | That's it! Thank you for your contribution!
 97 | 
 98 | #### After your pull request is merged
 99 | 
100 | After your pull request is merged, you can safely delete your branch and pull the changes
101 | from the main (upstream) repository:
102 | 
103 | - Delete the remote branch on GitHub either through the GitHub web UI or your local shell as follows:
104 | 
105 |   ```shell
106 |   git push origin --delete my-fix-branch
107 |   ```
108 | 
109 | - Check out the master branch:
110 | 
111 |   ```shell
112 |   git checkout master -f
113 |   ```
114 | 
115 | - Delete the local branch:
116 | 
117 |   ```shell
118 |   git branch -D my-fix-branch
119 |   ```
120 | 
121 | - Update your master branch with the latest upstream version:
122 | 
123 |   ```shell
124 |   git pull --ff upstream master
125 |   ```
126 | 
127 | ## <a name="rules"></a> Coding Rules
128 | 
129 | To ensure consistency throughout the source code, keep these rules in mind as you are working:
130 | 
131 | - All features or bug fixes **must be tested** by one or more specs (unit-tests or e2e-tests).
132 | 
133 | ## <a name="commit"></a> Commit Message Guidelines
134 | 
135 | We have very precise rules over how our git commit messages can be formatted. This leads to **more
136 | readable messages** that are easy to follow when looking through the **project history**. But also,
137 | we use the git commit messages to **generate the change log**.
138 | 
139 | ### Commit Message Format
140 | 
141 | Each commit message consists of a **header**, a **body** and a **footer**. The header has a special
142 | format that includes a **type**, a **scope** and a **subject**:
143 | 
144 | ```
145 | <type>(<scope>): <subject>
146 | <BLANK LINE>
147 | <body>
148 | <BLANK LINE>
149 | <footer>
150 | ```
151 | 
152 | The **header** is mandatory and the **scope** of the header is optional.
153 | 
154 | Any line of the commit message cannot be longer 100 characters! This allows the message to be easier
155 | to read on GitHub as well as in various git tools.
156 | 
157 | ### Revert
158 | 
159 | If the commit reverts a previous commit, it should begin with `revert:`, followed by the header of the reverted commit. In the body it should say: `This reverts commit <hash>.`, where the hash is the SHA of the commit being reverted.
160 | 
161 | ### Type
162 | 
163 | Must be one of the following:
164 | 
165 | - **build**: Changes that affect the build system or external dependencies
166 | - **ci**: Changes to our CI configuration files and scripts
167 | - **docs**: Documentation only changes
168 | - **feat**: A new feature
169 | - **fix**: A bug fix
170 | - **perf**: A code change that improves performance
171 | - **refactor**: A code change that neither fixes a bug nor adds a feature
172 | - **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing
173 |   semi-colons, etc)
174 | - **test**: Adding missing tests or correcting existing tests
175 | - **chore**: Maintenance
176 | 
177 | ### Scope
178 | 
179 | The scope should be the name of the module affected as perceived by the person reading changelog generated from the commit messages.
180 | 
181 | ### Subject
182 | 
183 | The subject contains succinct description of the change:
184 | 
185 | - use the imperative, present tense: "change" not "changed" nor "changes"
186 | - don't capitalize first letter
187 | - no dot (.) at the end
188 | 
189 | ### Body
190 | 
191 | Just as in the **subject**, use the imperative, present tense: "change" not "changed" nor "changes".
192 | The body should include the motivation for the change and contrast this with previous behavior.
193 | 
194 | ### Footer
195 | 
196 | The footer should contain any information about **Breaking Changes** and is also the place to
197 | reference GitHub issues that this commit **Closes**.
198 | 
199 | [github]: https://github.com/vuesion/packages/issues
200 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Bug report
3 | about: Create a report to help us improve
4 | ---
5 | 
6 | **Describe the bug**
7 | A clear and concise description of what the bug is.
8 | 
9 | 


--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | <!--
 2 | There are two main goals in this document, depending on the nature of your PR:
 3 | 
 4 | - description: please tell us about your PR
 5 | - checklist: please review the checklist
 6 | 
 7 | To help to quickly understand the nature of your pull request,
 8 | please create a description that incorporates the following elements:
 9 | -->
10 | 
11 | ### What is accomplished by your PR?
12 | 
13 | description...
14 | 
15 | ### Is there something controversial in your PR?
16 | 
17 | please take a moment to tell us about your choices...
18 | 
19 | ### Link to the Issue
20 | 
21 | or a link to a ticket system...
22 | 
23 | <!--
24 | Thanks for contributing!
25 | -->
26 | 


--------------------------------------------------------------------------------
/.github/workflows/deploy-gh-pages.yml:
--------------------------------------------------------------------------------
 1 | name: Build and Deploy
 2 | on: [push]
 3 | jobs:
 4 |   build-and-deploy:
 5 |     runs-on: ubuntu-latest
 6 |     steps:
 7 |       - name: Checkout 🛎️
 8 |         uses: actions/checkout@v3
 9 | 
10 |       - name: Setup node
11 |         uses: actions/setup-node@v3
12 |         with:
13 |           node-version: 14
14 | 
15 |       - name: Install and Build 🔧
16 |         run: |
17 |           npm install
18 |           npm run build
19 | 
20 |       - name: Deploy 🚀
21 |         uses: JamesIves/github-pages-deploy-action@4.1.4
22 |         with:
23 |           branch: gh-pages
24 |           folder: dist
25 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | logs
2 | *.log
3 | node_modules/
4 | .idea
5 | dist


--------------------------------------------------------------------------------
/.vuepress/config.js:
--------------------------------------------------------------------------------
  1 | const path = require('path');
  2 | 
  3 | module.exports = {
  4 |     base: '/docs/',
  5 |     dest: path.join(path.resolve(__dirname), '../dist'),
  6 |     locales: {
  7 |         '/en/': {
  8 |             lang: 'en',
  9 |             title: 'Vuesion',
 10 |             description:
 11 |                 'Vuesion is a boilerplate that empowers product teams to build faster with modern best practices across engineering and design. It features a full-stack framework, comprehensive design system, robust testing, and seamless internationalization.',
 12 |         },
 13 |     },
 14 |     head: [
 15 |         ['script', {}, `(function customScript() {
 16 |             window.addEventListener('load', () => {
 17 |               var version = window.location.pathname.includes('v5') ? 'v5' : 'v4';
 18 |               var homeLink = document.querySelector('.home-link');
 19 | 
 20 |               if (homeLink) {
 21 |                 homeLink.setAttribute('href', '/docs/en/' + version + '/');
 22 |                 homeLink.setAttribute('onclick', "document.location='/docs/en/" + version + "/';return false;");
 23 |               }
 24 |             });
 25 |         })()`],
 26 |         [
 27 |             'link',
 28 |             {
 29 |                 rel: 'icon',
 30 |                 href: `/logo.png`,
 31 |             },
 32 |         ],
 33 |         [
 34 |             'link',
 35 |             {
 36 |                 rel: 'manifest',
 37 |                 href: '/manifest.json',
 38 |             },
 39 |         ],
 40 |         [
 41 |             'meta',
 42 |             {
 43 |                 name: 'theme-color',
 44 |                 content: '#0f3191',
 45 |             },
 46 |         ],
 47 |         [
 48 |             'meta',
 49 |             {
 50 |                 name: 'apple-mobile-web-app-capable',
 51 |                 content: 'yes',
 52 |             },
 53 |         ],
 54 |         [
 55 |             'meta',
 56 |             {
 57 |                 name: 'apple-mobile-web-app-status-bar-style',
 58 |                 content: 'black',
 59 |             },
 60 |         ],
 61 |         [
 62 |             'link',
 63 |             {
 64 |                 rel: 'apple-touch-icon',
 65 |                 href: `/icons/apple-touch-icon-152x152.png`,
 66 |             },
 67 |         ],
 68 |         [
 69 |             'link',
 70 |             {
 71 |                 rel: 'mask-icon',
 72 |                 href: '/icons/safari-pinned-tab.svg',
 73 |                 color: '#0f3191',
 74 |             },
 75 |         ],
 76 |         [
 77 |             'meta',
 78 |             {
 79 |                 name: 'msapplication-TileImage',
 80 |                 content: '/icons/msapplication-icon-144x144.png',
 81 |             },
 82 |         ],
 83 |         [
 84 |             'meta',
 85 |             {
 86 |                 name: 'msapplication-TileColor',
 87 |                 content: '#0f3191',
 88 |             },
 89 |         ],
 90 |     ],
 91 |     serviceWorker: true,
 92 |     themeConfig: {
 93 |         logo: '/logo.png',
 94 |         repo: 'vuesion/vuesion',
 95 |         docsRepo: 'vuesion/docs',
 96 |         editLinks: true,
 97 |         smoothScroll: true,
 98 |         locales: {
 99 |             '/en/': {
100 |                 label: 'English',
101 |                 editLinkText: 'Edit this page on GitHub',
102 |                 nav: [
103 |                     {
104 |                         text: 'Storybook',
105 |                         link: 'https://vuesion.herokuapp.com/storybook/',
106 |                     },
107 |                     {
108 |                         text: 'Figma UIKit',
109 |                         link: 'https://www.figma.com/community/file/1080868611324978249',
110 |                     },
111 |                     {
112 |                         text: 'Discord',
113 |                         link: 'https://discord.gg/59x5cg2',
114 |                     },
115 |                     {
116 |                         text: 'Versions',
117 |                         items: [
118 |                             {text: 'v4', link: '/en/v4/'},
119 |                             {text: 'v5', link: '/en/v5/'}
120 |                         ]
121 |                     }
122 |                 ],
123 |                 sidebar: {
124 |                     '/en/v4/': [
125 |                         {
126 |                             title: 'General',
127 |                             collapsable: false,
128 |                             children: [
129 |                                 'introduction',
130 |                                 'FAQ'
131 |                             ],
132 |                         },
133 |                         {
134 |                             title: 'Getting started',
135 |                             collapsable: false,
136 |                             children: [
137 |                                 'guide/install',
138 |                                 'guide/run',
139 |                                 'guide/test',
140 |                                 'guide/cli',
141 |                                 'guide/clean-up',
142 |                                 'guide/contribute',
143 |                             ],
144 |                         },
145 |                         {
146 |                             title: 'Deep dives',
147 |                             collapsable: false,
148 |                             children: [
149 |                                 'deep_dives/build',
150 |                                 'deep_dives/design-system',
151 |                                 'deep_dives/i18n',
152 |                                 ['https://nuxtjs.org/docs/2.x/deployment/deploying-to-21yunbox', 'Deployment'],
153 |                                 'deep_dives/update',
154 |                                 'deep_dives/npm-scripts',
155 |                                 'deep_dives/vuex',
156 |                             ],
157 |                         },
158 |                     ],
159 |                     '/en/v5/': [
160 |                         {
161 |                             title: 'Guide',
162 |                             collapsable: false,
163 |                             children: [
164 |                                 'guide/introduction',
165 |                                 'guide/getting-started',
166 |                                 'guide/concepts',
167 |                                 'guide/development',
168 |                                 'guide/design-system',
169 |                                 'guide/community-and-support',
170 |                             ],
171 |                         },
172 |                         {
173 |                             title: 'Tutorials',
174 |                             collapsable: false,
175 |                             children: [
176 |                                 'tutorials/layout-components',
177 |                                 'tutorials/i18n',
178 |                                 'tutorials/theming',
179 |                             ],
180 |                         },
181 |                     ],
182 |                 },
183 |             },
184 |         },
185 |     },
186 |     plugins: ['mermaidjs']
187 | };
188 | 


--------------------------------------------------------------------------------
/.vuepress/public/analyzer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vuesion/docs/ef07dfeb9fc5213f99f85ea87b760c329257fec0/.vuepress/public/analyzer.png


--------------------------------------------------------------------------------
/.vuepress/public/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vuesion/docs/ef07dfeb9fc5213f99f85ea87b760c329257fec0/.vuepress/public/android-chrome-192x192.png


--------------------------------------------------------------------------------
/.vuepress/public/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vuesion/docs/ef07dfeb9fc5213f99f85ea87b760c329257fec0/.vuepress/public/android-chrome-512x512.png


--------------------------------------------------------------------------------
/.vuepress/public/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vuesion/docs/ef07dfeb9fc5213f99f85ea87b760c329257fec0/.vuepress/public/apple-touch-icon.png


--------------------------------------------------------------------------------
/.vuepress/public/architecture.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vuesion/docs/ef07dfeb9fc5213f99f85ea87b760c329257fec0/.vuepress/public/architecture.jpg


--------------------------------------------------------------------------------
/.vuepress/public/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vuesion/docs/ef07dfeb9fc5213f99f85ea87b760c329257fec0/.vuepress/public/favicon-16x16.png


--------------------------------------------------------------------------------
/.vuepress/public/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vuesion/docs/ef07dfeb9fc5213f99f85ea87b760c329257fec0/.vuepress/public/favicon-32x32.png


--------------------------------------------------------------------------------
/.vuepress/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vuesion/docs/ef07dfeb9fc5213f99f85ea87b760c329257fec0/.vuepress/public/favicon.ico


--------------------------------------------------------------------------------
/.vuepress/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vuesion/docs/ef07dfeb9fc5213f99f85ea87b760c329257fec0/.vuepress/public/logo.png


--------------------------------------------------------------------------------
/.vuepress/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Vuesion",
 3 |   "short_name": "Vuesion",
 4 |   "theme_color": "#f43b6c",
 5 |   "background_color": "#f43b6c",
 6 |   "display": "standalone",
 7 |   "orientation": "portrait",
 8 |   "Scope": "/",
 9 |   "start_url": "/docs/en/",
10 |   "icons": [
11 |     {
12 |       "src": "/android-chrome-192x192",
13 |       "sizes": "192x192",
14 |       "type": "image/png"
15 |     },
16 |     {
17 |       "src": "/android-chrome-512x512",
18 |       "sizes": "512x512",
19 |       "type": "image/png"
20 |     }
21 |   ],
22 |   "splash_pages": null
23 | }
24 | 


--------------------------------------------------------------------------------
/.vuepress/public/v5/new-rest-api.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vuesion/docs/ef07dfeb9fc5213f99f85ea87b760c329257fec0/.vuepress/public/v5/new-rest-api.gif


--------------------------------------------------------------------------------
/.vuepress/public/v5/vue-box.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vuesion/docs/ef07dfeb9fc5213f99f85ea87b760c329257fec0/.vuepress/public/v5/vue-box.png


--------------------------------------------------------------------------------
/.vuepress/public/v5/vue-columns.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vuesion/docs/ef07dfeb9fc5213f99f85ea87b760c329257fec0/.vuepress/public/v5/vue-columns.png


--------------------------------------------------------------------------------
/.vuepress/public/v5/vue-inline.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vuesion/docs/ef07dfeb9fc5213f99f85ea87b760c329257fec0/.vuepress/public/v5/vue-inline.png


--------------------------------------------------------------------------------
/.vuepress/public/v5/vue-stack.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vuesion/docs/ef07dfeb9fc5213f99f85ea87b760c329257fec0/.vuepress/public/v5/vue-stack.png


--------------------------------------------------------------------------------
/.vuepress/styles/index.styl:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.bunny.net/css?family=Inter:400,600,900|Lora:400,600&display=swap');
 2 | 
 3 | html, body {
 4 |   font-family: 'Inter', sans-serif;
 5 |   font-weight: 400;
 6 |   background: #ffffff;
 7 |   color: #141518;
 8 | }
 9 | 
10 | img, div[class*="language-"] {
11 |   border-radius: 16px !important;
12 | }
13 | 
14 | h1 {
15 |   font-family: 'Inter', sans-serif;
16 |   font-weight: 900;
17 | }
18 | 
19 | h2, h3, h4, h5, h6 {
20 |   font-family: 'Inter', sans-serif;
21 |   font-weight: 600;
22 | }
23 | 
24 | .navbar {
25 |   height: 56px !important;
26 |   min-height: 56px !important;
27 |   line-height: 1.5 !important;
28 |   background: #ffffff;
29 | }
30 | 
31 | .navbar .logo {
32 |   width: 32px !important;
33 |   height: 32px !important;
34 |   min-width: 32px !important;
35 |   min-height: 32px !important;
36 | }
37 | 
38 | .sidebar {
39 |   top: 56px;
40 |   background: #ffffff;
41 | }
42 | 
43 | .links, .search-box input {
44 |   background-color: #ffffff !important;
45 | }
46 | 
47 | code {
48 |   background-color: #272a31 !important;
49 |   color: #fff !important;
50 | }
51 | 
52 | blockquote, .description {
53 |     color: #4c535f !important;
54 | }
55 | 
56 | .mermaid-diagram .node circle {
57 |   fill: #663CCB !important;
58 |   stroke: #663CCB !important;
59 |   stroke-width: 2px !important;
60 | }
61 | 
62 | .mermaid-diagram .node .nodeLabel {
63 |   color: #fff !important;
64 |   font-family: 'Inter', sans-serif;
65 |   font-weight: 600;
66 |   font-size: 14px;
67 | }
68 | .mermaid-diagram .edgeLabels {
69 |   transform: translateY(-10px);
70 | }
71 | .mermaid-diagram .edgeLabels > .edgeLabel span {
72 |   color: #3f444e !important;
73 |   background-color: transparent !important;
74 |   font-family: 'Inter', sans-serif;
75 |   font-weight: 400;
76 |   font-size: 14px;
77 | }


--------------------------------------------------------------------------------
/.vuepress/styles/palette.styl:
--------------------------------------------------------------------------------
 1 | // colors
 2 | $accentColor = #663ccb
 3 | $textColor = #141518
 4 | $borderColor = #eff0f2
 5 | $codeBgColor = #272a31
 6 | $arrowBgColor = #cf508d
 7 | $badgeTipColor = #30a46c
 8 | $badgeWarningColor = #dba70c
 9 | $badgeErrorColor = #eb604b
10 | 
11 | // layout
12 | $navbarHeight = 5.6rem
13 | $sidebarWidth = 20rem
14 | $contentWidth = 740px
15 | $homePageWidth = 960px
16 | 
17 | // responsive breakpoints
18 | $MQNarrow = 959px
19 | $MQMobile = 719px
20 | $MQMobileNarrow = 419px
21 | 
22 | 


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
 1 | # Contributor Covenant Code of Conduct
 2 | 
 3 | ## Our Pledge
 4 | 
 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
 6 | 
 7 | ## Our Standards
 8 | 
 9 | Examples of behavior that contributes to creating a positive environment include:
10 | 
11 | - Using welcoming and inclusive language
12 | - Being respectful of differing viewpoints and experiences
13 | - Gracefully accepting constructive criticism
14 | - Focusing on what is best for the community
15 | - Showing empathy towards other community members
16 | 
17 | Examples of unacceptable behavior by participants include:
18 | 
19 | - The use of sexualized language or imagery and unwelcome sexual attention or advances
20 | - Trolling, insulting/derogatory comments, and personal or political attacks
21 | - Public or private harassment
22 | - Publishing others' private information, such as a physical or electronic address, without explicit permission
23 | - Other conduct which could reasonably be considered inappropriate in a professional setting
24 | 
25 | ## Our Responsibilities
26 | 
27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
28 | 
29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
30 | 
31 | ## Scope
32 | 
33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
34 | 
35 | ## Enforcement
36 | 
37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at johannes.werner86@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
38 | 
39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
40 | 
41 | ## Attribution
42 | 
43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
44 | 
45 | [homepage]: http://contributor-covenant.org
46 | [version]: http://contributor-covenant.org/version/1/4/
47 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Johannes Werner
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vuesion Documentation
 2 | 
 3 | > Documentation of the [vuesion project](https://github.com/vuesion/vuesion)
 4 | 
 5 | 
 6 | 
 7 | # Links
 8 | [v4 Docs](https://vuesion.github.io/docs/en/v4/)
 9 | 
10 | [v5 Docs](https://vuesion.github.io/docs/en/v5/)
11 | 
12 | # Development
13 | 
14 | - clone repo
15 | - run `npm install`
16 | - run `npm run dev`
17 | - open [http://localhost:8080/docs/en/v5/](http://localhost:8080/docs/en/v4/)
18 | 
19 | # Contribute
20 | 
21 | Contributions are always welcome! Please read the [contribution guidelines](https://github.com/vuesion/vuesion/blob/master/CONTRIBUTING.md) first.
22 | 
23 | 
24 | # License
25 | [![MIT license](https://img.shields.io/badge/License-MIT-blue.svg)](https://lbesson.mit-license.org/)
26 | 


--------------------------------------------------------------------------------
/en/README.md:
--------------------------------------------------------------------------------
1 | # Versions
2 | [v4 Docs](./v4)
3 | 
4 | [v5 Docs](./v5)
5 | 
6 | 


--------------------------------------------------------------------------------
/en/v4/FAQ.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | prev: ./introduction
 3 | next: ./guide/install
 4 | ---
 5 | 
 6 | # FAQ
 7 | 
 8 | ## Why are my properties not reactive?
 9 | 
10 | In Vuex and on your component instance, properties must be defined in the initial state otherwise, they will not be
11 | observed for changes.
12 | 
13 | [Please read the rules of reactivity.](https://vuex.vuejs.org/guide/mutations.html#mutations-follow-vue-s-reactivity-rules)
14 | 
15 | ## I don't need to build my own design system, can I use Vuesion with a third-party UI framework?
16 | 
17 | Yes, you can! [See this tutorial.](https://tailwindcss.nuxtjs.org/)
18 | 
19 | ## I don't need server-side-rendering, can I use Vuesion to build a single-page application?
20 | 
21 | Yes, [here is the tutorial!](https://nuxtjs.org/docs/2.x/get-started/commands#static-deployment-pre-rendered)
22 | 


--------------------------------------------------------------------------------
/en/v4/README.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | home: true
 3 | heroImage: /logo.png
 4 | actionText: Get Started →
 5 | actionLink: ./introduction
 6 | features:
 7 |   - title: Quick scaffolding
 8 |     details: Create components, pages, vuex-modules, stories, interfaces, fixtures - and their tests - right from the CLI
 9 |   - title: Server-side-rendering
10 |     details: Use server-side-rendering, create a single-page-app or generate static HTML powered by Nuxt.js
11 |   - title: Industry-standard i18n support
12 |     details: Scalable apps need to support multiple languages, easily add and support multiple languages
13 |   - title: Progressive-Web-App
14 |     details: Offline-first support with service-workers and a lighthouse score as high as possible
15 |   - title: Customizable Design System
16 |     details: Includes a blueprint for a 100% customizable, themeable Design System with 35+ components
17 |   - title: Storybook
18 |     details: Allows interactive development, testing and sharing of UI components in various property states
19 |   - title: Figma UIKit
20 |     details: The included Figma design system file includes the basics and all components of the Vuesion design system and it's perfectly in sync with storybook
21 |   - title: GraphQL
22 |     details: includes a blueprint how to use vue-apollo with the auth-module, axios-module (re-authentication) and the composition-api
23 |   - title: DX, Code quality and maintenance
24 |     details: TypeScript, Eslint, commit message lint, prettier and husky set up will help you to keep a high code quality
25 | 
26 | 
27 | footer: MIT Licensed | Copyright © 2018 - present Johannes Werner
28 | ---
29 | 


--------------------------------------------------------------------------------
/en/v4/deep_dives/build.md:
--------------------------------------------------------------------------------
 1 | # Production build
 2 | 
 3 | Your production app should be fast and optimized.
 4 | 
 5 | ## With server-side-rendering
 6 | 
 7 | In order to optimize your app for production, run the command `npm run build`.
 8 | 
 9 | This will optimize your app as follows:
10 | 
11 | - It runs [Nuxt.js build](https://nuxtjs.org/docs/2.x/get-started/commands#server-deployment) in [modern-mode](https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-modern)
12 | - It adds a [service worker](https://pwa.nuxtjs.org/workbox) to your application to make it a PWA
13 | - It'll serve compressed versions for all assets
14 | 
15 | ## SPA with static generated HTML files
16 | 
17 | If you don't need server-side-rendering, yet. You can use the `npm run build:spa` command to generate a single-page-application.
18 | 
19 | This will optimize your app as follows:
20 | 
21 | - It runs [Nuxt.js generate](https://nuxtjs.org/docs/2.x/get-started/commands#static-deployment-pre-rendered) in [modern-mode](https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-modern)
22 | - It adds a [service worker](https://pwa.nuxtjs.org/workbox) to your application to make it a PWA
23 | 
24 | ::: warning Not all Nuxt.js features are available with nuxt generate
25 | Have a look at the [Nuxt.js generate](https://nuxtjs.org/docs/2.x/get-started/commands#static-deployment-pre-rendered) documentation.
26 | :::
27 | 
28 | ## Analyze your bundles
29 | 
30 | Sometimes your bundles are just too big and you have no idea why.
31 | 
32 | A tool to find out which parts of your bundles are too big is the [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) plugin for webpack.
33 | 
34 | To use this tool and get an overview of your bundles, run `npm run build:analyze`.
35 | 
36 | This will display the following overview and lets you identify large bundles:
37 | 
38 | <img :src="$withBase('/analyzer.png')" alt="webpack-bundle-analyzer">
39 | 


--------------------------------------------------------------------------------
/en/v4/deep_dives/design-system.md:
--------------------------------------------------------------------------------
  1 | # Design System
  2 | 
  3 | ## Introduction
  4 | 
  5 | One of the main features of Vuesion are the components.
  6 | 
  7 | Unfortunately, components alone are not the solution
  8 | to a consistent UX. Therefore, we need to define some restrictions that will ensure consistency.
  9 | 
 10 | An additional benefit of these rules is a better way to communicate within the product team. Every Color has a name,
 11 | every text-style, every spacing. Everything has a purpose!
 12 | 
 13 | ::: tip Better communication
 14 | By sharing [storybook](https://vuesion.herokuapp.com/storybook/) or
 15 | the [Figma file](https://www.figma.com/community/file/1080868611324978249),
 16 | you can enable everyone in your team to participate in product-related discussions.
 17 | :::
 18 | 
 19 | ## Architecture
 20 | 
 21 | ### Foundation
 22 | 
 23 | The foundation of the design system is the first abstraction layer,
 24 | and it is made up of the following parts
 25 | 
 26 | - Breakpoints, define the responsive behaviour of the design system
 27 | - Color Palette, every color that you want to use in the design system
 28 | - Spacings, define what spacings your want to use in the design system
 29 | - Typography, define size, weight, line-height and letter spacings of your typography
 30 | 
 31 | ### Design System Tokens
 32 | 
 33 | The 2nd abstraction layer are the Design System tokens, they help to quickly re-define the design-system and is
 34 | the foundation to enable theming/white-labeling. The tokens fall into the following categories:
 35 | 
 36 | - Brand Variations, fallback color for common brand variations (primary, neutral, warning, danger, success)
 37 | - Background Colors
 38 | - Surface Colors, optimized to work on top of Background Colors
 39 | - Border Colors
 40 | - Text Colors
 41 | - Interaction Colors, for all Brand Variations
 42 | - Elevation, box-shadows used to elevate elements
 43 | - Accessibility, outline that is used to indicate focus of elements
 44 | - Border Radius
 45 | 
 46 | ::: tip Typography Tokens
 47 | There are no tokens for common Text Styles, feel free to add them if one of your themes requires a different typography.
 48 | :::
 49 | 
 50 | ### Component Specific Variables
 51 | 
 52 | These variables are located in `./src/assets/design-system/variables/components` and are the final abstraction layer.
 53 | Every Vue component should only reference variables from this abstraction layer. This ensures that your components
 54 | are always easy to change and can be themed.
 55 | 
 56 | ### Relations between abstraction layers
 57 | 
 58 | ```shell
 59 |                                         ┌───────────┐
 60 |                                   ┌─────┤Breakpoints├─────┐
 61 |                                   │     └───────────┘     │
 62 |                                   │     ┌─────────────┐   │
 63 |                                   │     │Color Palette├───┤
 64 |                                   │     └─────────────┘   │
 65 |                                   │     ┌────────┐        │
 66 |                                   ├─────┤Spacings├────────┤
 67 |                                   │     └────────┘        │
 68 |                                   │     ┌──────────┐      │
 69 |                                   ├─────┤Typography├──────┤
 70 |                                   │     └──────────┘      │
 71 |                                   │     ┌──────────┐      │
 72 |                                   │     │Foundation│◄─────┘
 73 |                                   │     └─────┬────┘
 74 |                                   │           ▼
 75 |  ┌───────────────┐                │     ┌────────────────────┐
 76 |  │   Component   │◄───────────────┴──── │Design System Tokens│    
 77 |  │   Specific    │                      └────────────────────┘
 78 |  │   Variables   │                      ▲
 79 |  └───────────────┘                      │    ┌────────────────┐
 80 |                                         ├────┤Brand Variations│
 81 |                                         │    └────────────────┘
 82 |                                         │    ┌─────────────────┐
 83 |                                         ├────┤Background Colors│
 84 |                                         │    └─────────────────┘
 85 |                                         │    ┌──────────────┐
 86 |                                         ├────┤Surface Colors│
 87 |                                         │    └──────────────┘
 88 |                                         │    ┌─────────────┐
 89 |                                         ├────┤Border Colors│
 90 |                                         │    └─────────────┘
 91 |                                         │    ┌───────────┐
 92 |                                         ├────┤Text Colors│
 93 |                                         │    └───────────┘
 94 |                                         │    ┌──────────────────┐
 95 |                                         ├────┤Interaction Colors│
 96 |                                         │    └──────────────────┘
 97 |                                         │    ┌─────────┐
 98 |                                         ├────┤Elevation│
 99 |                                         │    └─────────┘
100 |                                         │    ┌─────────────┐
101 |                                         ├────┤Accessibility│
102 |                                         │    └─────────────┘
103 |                                         │    ┌─────────┐
104 |                                         ├────┤Animation│
105 |                                         │    └─────────┘
106 |                                         │    ┌─────────────┐
107 |                                         └────┤Border Radius│
108 |                                              └─────────────┘
109 | ```
110 | 
111 | ### Folder Structure
112 | 
113 | ```shell
114 | design-system/
115 | ├── README.md
116 | ├── docs # Documentation and utilities for documentation
117 | ├── mixins # SASS mixins that are used across components
118 | ├── themes # Theme files
119 | └── variables
120 |     ├── _breakpoints.scss # Foundation: Break point and viewport definition
121 |     ├── _color-palette.scss # Foundation: Color palette
122 |     ├── _spacings.scss # Foundation: available spacings for layout components, paddings, margins and any other spacings
123 |     ├── _typography.scss # Foundation: Font-families, Font-weights, Letter-spacings, Line-heights
124 |     ├── _variables.scss # Index file for all kinds of globally available SASS variables
125 |     └── components # Component Specific Variables
126 | ```
127 | 
128 | ## Layout Components
129 | 
130 | The Layout components mimic the Auto Layout feature from Figma and come with everything you need to build responsive
131 | designs.
132 | 
133 | ### [Box](https://vuesion.herokuapp.com/storybook/?path=/story/foundation-layout-box--with-equal-padding)
134 | 
135 | creates spacings around
136 | components and provides positioning options. Tip: to make components more re-usable, don't add outer spacings to them,
137 | use a Box around them.
138 | 
139 | ### [Columns](https://vuesion.herokuapp.com/storybook/?path=/story/foundation-layout-columns--nested-columns-with-responsive-spacings-and-width)
140 | 
141 | are used to provide horizontal spacings between components. Components are either equally distributed by default, but
142 | each column can take a specific width. Columns can be stacked and are great to create Forms or general layouts. Tip:
143 | Columns don't provide vertical space, so it pairs well with the Stack.
144 | 
145 | ### [ContentBlock](https://vuesion.herokuapp.com/storybook/?path=/story/foundation-layout-contentblock--limit-and-center-content-based-on-view-port)
146 | 
147 | provides a max width for all breakpoints to limit the content width of a page or components.
148 | 
149 | ### [Inline](https://vuesion.herokuapp.com/storybook/?path=/story/foundation-layout-inline--with-responsive-spacing)
150 | 
151 | is used to provide horizontal and vertical spacings between components. Components are displayed with their inline
152 | width. Inline can
153 | be stacked and is great to creat a list of elements.
154 | 
155 | ### [Masonry](https://vuesion.herokuapp.com/storybook/?path=/story/foundation-layout-masonry--default)
156 | 
157 | is used to provide horizontal and vertical spacings between components. Components are displayed with and equal width
158 | and unequal height.
159 | Tipp: it only supports 3 columns and has a fixed responsive behaviour.
160 | 
161 | ### [Stack](https://vuesion.herokuapp.com/storybook/?path=/story/foundation-layout-stack--with-responsive-spacing)
162 | 
163 | is used to provide vertical spacings between components. Components are displayed with their original height.
164 | 
165 | ### [Tiles](https://vuesion.herokuapp.com/storybook/?path=/story/foundation-layout-tiles--with-responsive-columns-and-spacings)
166 | 
167 | is used to provide horizontal and vertical spacings between components. Components are either equally distributed. Tip:
168 | you can configure the number of columns. The vertical and horizontal space independently.
169 | 
170 | ## Creating a new theme
171 | 
172 | ### Creating the theme file
173 | 
174 | 1. Create a new file in `./src/assets/design-system/themes`, e.g. `halloween.scss`
175 | 2. Copy the contents of the file `./src/assets/design-system/themes/dark.scss` and paste them into your theme file
176 | 3. Change the root class name to `.halloween`
177 | 4. Replace the values of the variable with your new values
178 | 
179 | ```css
180 | /**
181 |  Variable Nomenclature:
182 |  1. Brand (global namespace)
183 |  2. Application (css property or purpose)
184 |  3. Brand Variation (primary, warning, danger, success, inverse, default)
185 |  4. Emphasis (optional)
186 |  5. State (optional)
187 | */
188 | 
189 | :root.halloween {
190 |     /* Brand Variations */
191 |     --brand-primary: #de4300;
192 |     --brand-neutral: #{palette-color-level('neutral', 7)};
193 |     --brand-danger: #{palette-color-level('danger', 7)};
194 |     --brand-warning: #{palette-color-level('warning', 7)};
195 |     --brand-success: #{palette-color-level('success', 7)};
196 | 
197 |     /* Background Colors */
198 |     --brand-bg-default-high: #{palette-color-level('neutral', 10)};
199 |     --brand-bg-default-medium: #{palette-color-level('neutral', 9)};
200 |     --brand-bg-default-low: #{palette-color-level('neutral', 8)};
201 |     --brand-bg-inverse-high: #{palette-color-level('neutral', 1)};
202 |     --brand-bg-inverse-medium: #{palette-color-level('neutral', 2)};
203 |     --brand-bg-inverse-low: #{palette-color-level('neutral', 3)};
204 | 
205 |     /* Surface Colors */
206 |     --brand-surface-default-high: #{palette-color-level('neutral', 9)};
207 |     --brand-surface-default-medium: #{palette-color-level('neutral', 8)};
208 |     --brand-surface-default-low: #{palette-color-level('neutral', 7)};
209 |     --brand-surface-inverse-high: #{palette-color-level('neutral', 0)};
210 |     --brand-surface-inverse-medium: #{palette-color-level('neutral', 1)};
211 |     --brand-surface-inverse-low: #{palette-color-level('neutral', 2)};
212 |     --brand-surface-info-high: #{palette-color-level('primary', 8)};
213 |     --brand-surface-info-medium: #{palette-color-level('primary', 9)};
214 |     --brand-surface-info-low: #{palette-color-level('primary', 10)};
215 |     --brand-surface-danger-high: #{palette-color-level('danger', 8)};
216 |     --brand-surface-danger-medium: #{palette-color-level('danger', 9)};
217 |     --brand-surface-danger-low: #{palette-color-level('danger', 10)};
218 |     --brand-surface-warning-high: #{palette-color-level('warning', 8)};
219 |     --brand-surface-warning-medium: #{palette-color-level('warning', 9)};
220 |     --brand-surface-warning-low: #{palette-color-level('warning', 10)};
221 |     --brand-surface-success-high: #{palette-color-level('success', 8)};
222 |     --brand-surface-success-medium: #{palette-color-level('success', 9)};
223 |     --brand-surface-success-low: #{palette-color-level('success', 10)};
224 | 
225 |     /* Border Colors */
226 |     --brand-border-default-medium: #{palette-color-level('neutral', 7)};
227 |     --brand-border-default-low: #{palette-color-level('neutral', 8)};
228 |     --brand-border-inverse-medium: #{palette-color-level('neutral', 9)};
229 |     --brand-border-inverse-low: #{palette-color-level('neutral', 7)};
230 |     --brand-border-info-high: #de4300;
231 |     --brand-border-info-low: #{palette-color-level('primary', 9)};
232 |     --brand-border-danger-high: #{palette-color-level('danger', 7)};
233 |     --brand-border-danger-low: #{palette-color-level('danger', 9)};
234 |     --brand-border-warning-high: #{palette-color-level('warning', 7)};
235 |     --brand-border-warning-low: #{palette-color-level('warning', 9)};
236 |     --brand-border-success-high: #{palette-color-level('success', 7)};
237 |     --brand-border-success-low: #{palette-color-level('success', 9)};
238 | 
239 |     /* Text Colors */
240 |     --brand-text-default-high: #{palette-color-level('neutral', 0)};
241 |     --brand-text-default-medium: #{palette-color-level('neutral', 2)};
242 |     --brand-text-default-low: #{palette-color-level('neutral', 4)};
243 |     --brand-text-inverse-high: #{palette-color-level('neutral', 10)};
244 |     --brand-text-inverse-medium: #{palette-color-level('neutral', 7)};
245 |     --brand-text-inverse-low: #{palette-color-level('neutral', 6)};
246 |     --brand-text-info: #de4300;
247 |     --brand-text-danger: #{palette-color-level('danger', 7)};
248 |     --brand-text-warning: #{palette-color-level('warning', 7)};
249 |     --brand-text-success: #{palette-color-level('success', 7)};
250 | 
251 |     /* Interaction Colors */
252 |     --brand-interaction-primary-enabled: #ff4d00;
253 |     --brand-interaction-primary-hovered: #ff7036;
254 |     --brand-interaction-primary-activated: #de4300;
255 | 
256 |     --brand-interaction-neutral-enabled: #{palette-color-level('neutral', 9)};
257 |     --brand-interaction-neutral-hovered: #{palette-color-level('neutral', 8)};
258 |     --brand-interaction-neutral-activated: #{palette-color-level('neutral', 10)};
259 | 
260 |     --brand-interaction-danger-enabled: #{palette-color-level('danger', 6)};
261 |     --brand-interaction-danger-hovered: #{palette-color-level('danger', 5)};
262 |     --brand-interaction-danger-activated: #{palette-color-level('danger', 7)};
263 | 
264 |     --brand-interaction-warning-enabled: #{palette-color-level('warning', 6)};
265 |     --brand-interaction-warning-hovered: #{palette-color-level('warning', 5)};
266 |     --brand-interaction-warning-activated: #{palette-color-level('warning', 7)};
267 | 
268 |     --brand-interaction-success-enabled: #{palette-color-level('success', 6)};
269 |     --brand-interaction-success-hovered: #{palette-color-level('success', 5)};
270 |     --brand-interaction-success-activated: #{palette-color-level('success', 7)};
271 | 
272 |     --brand-interaction-secondary-enabled: #{palette-color-level('primary', 2)};
273 |     --brand-interaction-secondary-hovered: #{palette-color-level('primary', 1)};
274 |     --brand-interaction-secondary-activated: #{palette-color-level('primary', 3)};
275 | 
276 | / / UTILS
277 |     /* Border radius */
278 | --brand-border-radius-xs: #{$space-2};
279 |     --brand-border-radius-sm: #{$space-4};
280 |     --brand-border-radius-md: #{$space-8};
281 |     --brand-border-radius-lg: #{$space-16};
282 | 
283 |     /* Elevation */
284 |     --brand-elevation-1: 0 1px 4px rgba(0, 0, 0, 0.3);
285 |     --brand-elevation-2: 0 -1px 2px -1px rgba(0, 0, 0, 0.05), 0 3px 6px rgba(0, 0, 0, 0.3);
286 |     --brand-elevation-3: 0 -2px 4px rgba(0, 0, 0, 0.08), 0 6px 10px rgba(0, 0, 0, 0.3);
287 | 
288 |     /* A11y */
289 |     --brand-focused: 0 0 0 #{$space-2} #{palette-color-level('neutral', 10)},
290 |     0 0 0 #{$space-4} #de4300;
291 | 
292 |     /* Animation Language */
293 |     --brand-transition-duration: 250ms;
294 |     --brand-easing-curve: cubic-bezier(0.17, 0.67, 0.83, 0.67);
295 |     --brand-fade-animation-transition: opacity var(--brand-transition-duration) var(--brand-easing-curve);
296 | }
297 | 
298 | ```
299 | 
300 | ### Let SASS know about the new theme
301 | 
302 | 1. Open `./src/assets/global.scss` and import your theme file
303 | 
304 | ```css
305 | @import 'design-system/mixins/mixins';
306 | @import 'design-system/variables/variables';
307 | @import 'design-system/themes/light';
308 | @import 'design-system/themes/dark';
309 | @import 'design-system/themes/halloween'; /* new theme */
310 | ```
311 | 
312 | ### Let Storybook know about the new theme
313 | 
314 | 1. Open `./.vuesion/storybook/preview.js`
315 | 2. Add new theme
316 | 
317 | ```js
318 | addParameters({
319 |     ...
320 |         themeSwitcher
321 | :
322 | {
323 |     themes: [
324 |         ...
325 |             {label: 'Halloween Theme', value: 'halloween'},
326 |     ],
327 | }
328 | ,
329 | })
330 | ;
331 | ```
332 | 
333 | ### Let your application know about the new theme
334 | 
335 | 1. Open `./src/layouts/default.vue`
336 | 2. Add new theme
337 | 
338 | ```js
339 | export default defineComponent({
340 |     name: 'App',
341 |     ...
342 |         setup()
343 | {
344 | ...
345 | 
346 |     const themes = computed(() => [
347 |         {label: 'System', value: 'system'},
348 |         {label: 'Light', value: 'light'},
349 |         {label: 'Dark', value: 'dark'},
350 |         {label: 'Halloween', value: 'halloween'},
351 |     ]);
352 | 
353 | ...
354 | }
355 | ,
356 | })
357 | ;
358 | ```
359 | 


--------------------------------------------------------------------------------
/en/v4/deep_dives/i18n.md:
--------------------------------------------------------------------------------
  1 | # I18n
  2 | 
  3 | If you want to support multiple languages in your project. 
  4 | Vuesion has some useful tools to make it easier to manage your translations.
  5 | 
  6 | ## Default locale and supported locales
  7 | 
  8 | To tell the tooling which locale is your default locale you have to define it in the file: `./vuesion/config.json`.
  9 | 
 10 | You can also add as many other locales as you want to support.
 11 | The `extract-i18n-messages` script will add these translation files with the default messages defined for the default locale.
 12 | 
 13 | Example config:
 14 | 
 15 | ```json
 16 |   "i18n": {
 17 |     "defaultLocale": "en",
 18 |     "locales": [
 19 |         {
 20 |           "code": "en",
 21 |           "file": "en.json"
 22 |         },
 23 |         {
 24 |           "code": "de",
 25 |           "file": "de.json"
 26 |         }
 27 |     ]
 28 |     }
 29 | ```
 30 | 
 31 | ## Define and extract default messages
 32 | 
 33 | Open up a file, e.g. `./src/pages/index.vue`:
 34 | 
 35 | ```html
 36 | <template>
 37 |   <div>
 38 |       <landing-page-header />
 39 |       ...
 40 |   </div>
 41 | </template>
 42 | ```
 43 | 
 44 | and add a translation for our default locale (`en`):
 45 | 
 46 | ```html
 47 | <template>
 48 |   <div>
 49 |       {{ $t('home.test' /* this is a test!!! */) }}
 50 |       <landing-page-header />
 51 |       ...
 52 |   </div>
 53 | </template>
 54 | ```
 55 | 
 56 | Now run `npm run extract-i18n-messages` and go to [http://localhost:3000/](http://localhost:3000/).
 57 | 
 58 | You should see the message `this is a test!!!` one the top-left of the screen.
 59 | 
 60 | If you open up the file `./i18n/en.json` you should see a new key with the default message as value:
 61 | 
 62 | ```json
 63 | {
 64 | ...
 65 |   "home.test": "this is a test!!!"
 66 | }
 67 | ```
 68 | 
 69 | You should also see that the file `./i18n/de.json` has the exact same key and value added.
 70 | 
 71 | Let's translate it into German:
 72 | 
 73 | ```json
 74 | {
 75 | ...
 76 |   "home.test": "das ist ein Test!!!"
 77 | }
 78 | ```
 79 | 
 80 | and run `npm run extract-i18n-messages` again.
 81 | 
 82 | **The translated value is not overwritten because it is not the default locale.**
 83 | 
 84 | If you change the default message in your Vue component:
 85 | 
 86 | ```html
 87 | <template>
 88 |   <div>
 89 |       {{ $t('home.test' /* this is not a test!!! */) }}
 90 |       <landing-page-header />
 91 |       ...
 92 |   </div>
 93 | </template>
 94 | ```
 95 | 
 96 | and run `npm run extract-i18n-messages` again.
 97 | 
 98 | You will have a new value in `./i18n/en.json`:
 99 | 
100 | ```json
101 | {
102 | ...
103 |   "home.test": "this is not a test!!!"
104 | }
105 | ```
106 | 
107 | but the value in `./i18n/de.json` will stay the same:
108 | 
109 | ```json
110 | {
111 | ...
112 |   "home.test": "das ist ein Test!!!"
113 | }
114 | ```
115 | 
116 | ## Known limitations
117 | 
118 | If you want to add HTML to your default messages inside a template, you have to use `[]` instead of `<>` e.g.:
119 | 
120 | ```html
121 | <template>
122 |   <div>
123 |     <div v-html="$t('home.link' /* [a href='https://example.com' target='_blank']this is a link[/a] */)" />
124 |     ...
125 |   </div>
126 | </template>
127 | ```
128 | 


--------------------------------------------------------------------------------
/en/v4/deep_dives/npm-scripts.md:
--------------------------------------------------------------------------------
 1 | # NPM Scripts
 2 | 
 3 | | Script                | Description                                                       |
 4 | | --------------------- | ----------------------------------------------------------------- |
 5 | | dev                   | Run application in development mode and server component          |
 6 | | storybook:dev         | Run Storybook in development mode                                 |
 7 | | test                  | Run unit tests with jest                                          |
 8 | | generate              | Add new component, Page, vuex-module or interface  to the project |
 9 | | type-gen:gql          | Generate TypeScript types from your GraphQL queries and mutations |
10 | | type-gen:swagger      | Generate TypeScript types from a swagger.json file                |
11 | | extract-i18n-messages | Extract default i18n message from source code                     |
12 | | test:watch            | Run unit tests with jest in watch mode                            |
13 | | e2e                   | Run e2e tests with cypress.io                                     |
14 | | lint                  | Lint project files                                                |
15 | | clean                 | Clean up project files                                            |
16 | | storybook:build       | Generate static files from Storybook                              |
17 | | update                | Update the project to the latest Vuesion version                  |
18 | | prettier              | Format project files with prettier                                |
19 | | release:major         | Release a new major version of the project                        |
20 | | release:minor         | Release a new minor version of the project                        |
21 | | release:patch         | Release a new patch version of the project                        |
22 | | build                 | Build the project for production with server component            |
23 | | build:analyze         | Analyze the client bundle                                         |
24 | | build:spa             | Build the project for production without server component         |
25 | | start                 | Run the compile server component in production mode               |
26 | | ci                    | Script for integrating with the CI/CD service                     |
27 | 


--------------------------------------------------------------------------------
/en/v4/deep_dives/update.md:
--------------------------------------------------------------------------------
 1 | # Stay up-to-date
 2 | 
 3 | ## Get the latest changes
 4 | 
 5 | If you want to keep your copy of Vuesion up-to-date, follow these steps:
 6 | 
 7 | - check that you use a Version Control System for your app (e.g. github, gitlab, butbucket, etc.)
 8 | - clear your change list
 9 | - create a new branch
10 | - run `npm run update`
11 | 
12 | The update script will compare your current copy of Vuesion with the latest copy on `Vuesion/vuesion:master`.
13 | 
14 | It will create, delete, add or modify all the files that are different.
15 | 
16 | It is basically the same as if you would rebase your project on top of `Vuesion/vuesion:master`.
17 | But usually, it is not possible to rebase since you do not keep the history of Vuesion in your own app.
18 | 
19 | ## Merge with your local changes
20 | 
21 | Now you see the changes in your changelog:
22 | 
23 | - go through all the files and merge your changes (revert the parts that would break your app)
24 | - run the tests and lint your project: `npm run test && npm run lint`
25 | - start the app: `npm run dev`
26 | 
27 | If everything works, commit and merge your changes.
28 | 
29 | If not, you might want to update manually by comparing your local copy with the [CHANGELOG](https://github.com/vuesion/vuesion/blob/master/CHANGELOG.md).
30 | 


--------------------------------------------------------------------------------
/en/v4/deep_dives/vuex.md:
--------------------------------------------------------------------------------
  1 | # Persisting state
  2 | 
  3 | By default, Vuex keeps the state in memory. But the problem with keeping the state in memory is
  4 | that the state is reset as soon as the user reloads the page.
  5 | 
  6 | There are many ways to persist state if the user reloads the page.
  7 | For example, you could keep variables in the query of the URL and restore the state if the page loads.
  8 | 
  9 | This approach is ok for a small amount of data that is not confidential, e.g. filters, sort directions, page number, etc.
 10 | 
 11 | But sometimes you have to store confidential data like access tokens or big data objects like a list of products.
 12 | In these cases, you need to store your data in cookies or LocalStorage.
 13 | 
 14 | Vuesion comes with a Vuex middleware that allows you to persist Vuex modules in different storages.
 15 | 
 16 | ## Persist to cookies
 17 | 
 18 | Vuesion includes a CookieStorage adapter for the Vuex-persist middleware.
 19 | 
 20 | ::: tip Cookies
 21 | **Before you apply this tip, have a talk with a security engineer!**
 22 | 
 23 | Cookies are good for keeping access tokens. Cookies are available on the server too.
 24 | This means you can connect to protected APIs on the server to render the initial page
 25 | with the correct data.
 26 | :::
 27 | 
 28 | The CookieStorage adapter is already referenced in the file `./src/plugins/vuex-persist/vuex-persist.client.ts`.
 29 | 
 30 | ```js
 31 | import { Context } from '@nuxt/types';
 32 | import { VuexPersist } from '@vuesion/vuex-persist/dist/vuex-persist';
 33 | import { PersistCookieStorage } from '@vuesion/vuex-persist/dist/PersistCookieStorage';
 34 | 
 35 | export default ({ store }: Context) => {
 36 |     VuexPersist([
 37 |         new PersistCookieStorage(['counter' /*, other modules */], {
 38 |             cookieOptions: {
 39 |                 expires: 365,
 40 |             },
 41 |         }),
 42 |     ])(store);
 43 | };
 44 | ```
 45 | 
 46 | To persist your state to a cookie, you have to initialize a
 47 | new instance of `PersistCookieStorage` which takes a list of module names as
 48 | the first parameter and an `options` object as the second parameter.
 49 | 
 50 | You can define the `cookieOptions`, which is a copy of the
 51 | [js-cookie](https://github.com/js-cookie/js-cookie#cookie-attributes) attributes
 52 | and a callback to delete state that should not be persisted to the cookie.
 53 | 
 54 | ### Extracting cookie state on the server
 55 | 
 56 | The following file `./src/plugins/vuex-persist/vuex-persist.server.ts` is responsible for extracting 
 57 | the cookie state and merging it into the initial state of the app.
 58 | 
 59 | ```js
 60 | export default ({ store, req }: Context) => {
 61 |     const cookies = req && req.headers.cookie ? require('cookie').parse(req.headers.cookie) : {};
 62 |     const state = PersistCookieStorage.getMergedStateFromServerContext<any>(cookies, store.state);
 63 | 
 64 |     store.replaceState(state);
 65 | };
 66 | ```
 67 | 
 68 | ::: warning Cookie size
 69 | Please keep in mind that most web servers have a default maximum header size of **4KB** for cookies,
 70 | so you should consider just saving necessary data.
 71 | :::
 72 | 
 73 | ## Persist to LocalStorage
 74 | 
 75 | Vuesion includes a LocalStorage adapter for the Vuex-persist middleware.
 76 | 
 77 | ::: tip LocalStorage
 78 | LocalStorage works well for saving mid-sized data, but be aware that it is only available on the **client-side**.
 79 | That means that data you save to it will not be rendered on the server.
 80 | The DOM will always differ in this case and the page will be re-rendered immediately.
 81 | :::
 82 | 
 83 | Here is an example how to use the LocalStorage adapter:
 84 | 
 85 | `./src/plugins/vuex-persist/vuex-persist.client.ts`.
 86 | 
 87 | ```js
 88 | import { Context } from '@nuxt/types';
 89 | import { VuexPersist } from '@vuesion/vuex-persist/dist/vuex-persist';
 90 | import { PersistCookieStorage } from '@vuesion/vuex-persist/dist/PersistCookieStorage';
 91 | import { PersistLocalStorage } from '@vuesion/vuex-persist/dist/PersistLocalStorage';
 92 | import { IState } from '@/interfaces/IState';
 93 | 
 94 | export default ({ store }: Context) => {
 95 |     VuexPersist([
 96 |         new PersistCookieStorage(['counter' /*, other modules */], {
 97 |             cookieOptions: {
 98 |                 expires: 365,
 99 |             },
100 |         }),
101 |         new PersistLocalStorage(['counter' /*, other modules */], (state: IState) => {
102 |             delete state.counter.incrementPending;
103 |             delete state.counter.decrementPending;
104 | 
105 |             return state;
106 |         }),
107 |     ])(store);
108 | };
109 | ```
110 | 
111 | To persist your state to LocalStorage, you have to initialize a
112 | new instance of `PersistLocalStorage` which takes a list of module names as
113 | the first parameter and a callback to delete state that should not be persisted
114 | to LocalStorage as the second parameter.
115 | 


--------------------------------------------------------------------------------
/en/v4/guide/clean-up.md:
--------------------------------------------------------------------------------
  1 | # Clean up
  2 | 
  3 | At this point, your project contains code that is just for demo purposes.
  4 | 
  5 | We show you which files you can safely delete if you don't need any of the demo features.
  6 | 
  7 | ## Directories and Files
  8 | 
  9 | Directories and files that we would recommend to delete:
 10 | 
 11 | ```bash
 12 | └── src
 13 |     ├── api
 14 |     │   └── routes
 15 |     ├── pages
 16 |     │   └── example
 17 |     └── store
 18 |         └── counter
 19 | ```
 20 | 
 21 | ### Remove GraphQL
 22 | 
 23 | If you don't want to use the GraphQL you can also remove the following directories and files:
 24 | 
 25 | ```bash
 26 | └── src
 27 |     ├── graphql
 28 |     └── plugins
 29 |         └── apollo
 30 | ```
 31 | 
 32 | ## Code
 33 | 
 34 | Now you can remove the references to these files:
 35 | 
 36 | `./src/interfaces/IState.ts`
 37 | 
 38 | ```js
 39 | import { ICounterState } from '@/store/counter/state'; // remove
 40 | 
 41 | export interface IState {
 42 |     i18n: {
 43 |         locale: string;
 44 |     };
 45 |     counter: ICounterState; // remove
 46 | }
 47 | ```
 48 | 
 49 | `./src/api/index.ts`
 50 | 
 51 | ```js
 52 | ...
 53 | import { DemoRoutes } from './routes/DemoRoutes'; // remove
 54 | import { CounterRoutes } from './routes/CounterRoutes'; // remove
 55 | 
 56 | ...
 57 | 
 58 | /**
 59 |  * routes to demonstrate the possibilities of vuesion
 60 |  * TODO: can be removed if you don't need them in your application
 61 |  */
 62 | CounterRoutes(app); // remove
 63 | DemoRoutes(app); // remove
 64 | 
 65 | ...
 66 | ```
 67 | 
 68 | ### Remove GraphQL
 69 | 
 70 | If you don't want to use the GraphQL you can also remove the following references:
 71 | 
 72 | `./nuxt.config.ts`
 73 | 
 74 | ```js
 75 | ...
 76 |     // remove
 77 |     apollo: {
 78 |         clientConfigs: {
 79 |             default: '@/plugins/apollo/apollo-client-config.ts',
 80 |         },
 81 |     },
 82 |     build: {
 83 | ...
 84 |         transpile: ['vee-validate', '@vue/apollo-composable' // remove],
 85 |     },
 86 | ...
 87 |     modules: [
 88 |         '@nuxtjs/apollo', // remove
 89 |         ...
 90 |     ],
 91 |     plugins: [
 92 |         { src: '@/plugins/apollo/provide-apollo-client' }, // remove
 93 |         ...
 94 |     ],
 95 |     publicRuntimeConfig: {
 96 |         ...
 97 |         // remove
 98 |         apollo: {
 99 |             baseURL: process.env.GRAPHQL_ENDPOINT || 'https://rickandmortyapi.com/graphql',
100 |         },
101 |     },
102 | ...
103 | };
104 | 
105 | export default config;
106 | 
107 | ```
108 | 
109 | `./package.json`
110 | 
111 | ```json
112 | {
113 |   ...
114 |   "scripts": {
115 |     ...
116 |     "type-gen:gql": "graphql-codegen", // remove
117 |     ...
118 |   },
119 |   "dependencies": {
120 |     "@apollo/client": "3.3.6", // remove
121 |     "@graphql-codegen/cli": "1.20.1", // remove
122 |     "@graphql-codegen/introspection": "1.18.1", // remove
123 |     "@graphql-codegen/schema-ast": "1.18.1", // remove
124 |     "@graphql-codegen/typescript": "1.20.2", // remove
125 |     "@graphql-codegen/typescript-operations": "1.17.14", // remove
126 |     "@nuxtjs/apollo": "4.0.1-rc.5", // remove
127 |     ...
128 |     "@vue/apollo-composable": "4.0.0-alpha.12", // remove
129 |     ...
130 |     "apollo-cache-inmemory": "1.6.6", // remove
131 |     ...
132 |     "graphql": "15.4.0", // remove
133 |     ...
134 |   },
135 |   "devDependencies": {
136 |     ...
137 |     "mock-apollo-client": "1.1.0", // remove
138 |     ...
139 |   },
140 | }
141 | ```
142 | 
143 | ## Verification
144 | 
145 | Now you have a clean code-base, and you can start creating your product.
146 | 
147 | You should still see the Vuesion home page if you open up [http://localhost:3000](http://localhost:3000).
148 | But other routes should redirect to the `404` page.
149 | 
150 | ::: tip Does it still work?
151 | To verify that your changes did not break something, run `npm test`.
152 | :::
153 | 


--------------------------------------------------------------------------------
/en/v4/guide/cli.md:
--------------------------------------------------------------------------------
 1 | # Create your first page
 2 | 
 3 | Pages are special in Nuxt.js and their path and names will turn into your applications URLs.
 4 | If you want to know more about Pages, please consult the 
 5 | [Nuxt.js documentation about the Pages directory](https://nuxtjs.org/docs/directory-structure/pages/).
 6 | 
 7 | ## Use the Page generator
 8 | 
 9 | Let's create a new page with the interactive Vuesion generator CLI. Running `npm run generate` will prompt you some
10 | questions.
11 | 
12 | ```bash
13 | > vuesion generate
14 | 
15 | ? [PLOP] Please choose a generator. 
16 |   Simple Component - Add a single file component 
17 | ❯ Page - Add a new page 
18 |   Vuex Module - Add a new page 
19 |   Interface - Add a new interface and fixtures 
20 | ```
21 | 
22 | Choose `Page` and continue with `enter`:
23 | 
24 | ```bash
25 | > vuesion generate
26 | 
27 | ? [PLOP] Please choose a generator. Page - Add a new page
28 | ? What should it be called? 
29 | ```
30 | 
31 | Now enter the name of your route and page component.
32 | 
33 | ::: tip Name can include path information
34 | All generators can be prefixed with a path. Page names are always in singular form, for example `users/_id/index`
35 | will turn into `user/_id/index`.
36 | :::
37 | 
38 | Type `foo/index` and continue with `enter`
39 | 
40 | ```bash
41 | > vuesion generate
42 | 
43 | ? [PLOP] Please choose a generator. Page - Add a new page
44 | ? What should it be called? Foo
45 | ✔  ++ /Users/johanneswerner/Projects/vuesion/vuesion/src/pages/foo/index.vue
46 | ✔  ++ /Users/johanneswerner/Projects/vuesion/vuesion/src/pages/foo/index.spec.ts
47 | ```
48 | 
49 | Your page has been created at `./src/pages/foo/index.vue`. The generator also added a test
50 | file `./src/pages/foo/index.spec.ts`.
51 | 
52 | Open the file `./src/pages/foo/index.vue` and disable the authentication middleware for this page and
53 | also give it an expressive component name.
54 | 
55 | ```js
56 | ...
57 | export default defineComponent({
58 |   name: 'FooPage',
59 |   auth: false,
60 | ...
61 | ```
62 | 
63 | Go to [http://localhost:3000/foo](http://localhost:3000/foo) and you will see the new page.
64 | 
65 | ::: tip Does everything work?
66 | To verify that you didn't break something, run `npm test`.
67 | :::
68 | 


--------------------------------------------------------------------------------
/en/v4/guide/contribute.md:
--------------------------------------------------------------------------------
 1 | # Support the project
 2 | 
 3 | If you like this project and you want to help to make it even better, please contribute.
 4 | 
 5 | - You can join our [Discord](https://discord.gg/59x5cg2) server and help us build up a community.
 6 | 
 7 | - You can [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=I%20used%20%40vuesion1%20for%20my%20project%20and%20I%20really%20enjoyed%20it%20you%20should%20give%20it%20a%20try!&url=https://github.com/vuesion/vuesion&via=vuesion1&hashtags=vuesion,VueJS,NuxtJs,vue,nuxt)
 8 |   about this project to make it more popular
 9 | 
10 | - You can write code and create PRs, please read the [contribution guidelines](https://github.com/vuesion/vuesion/blob/master/CONTRIBUTING.md)
11 | 
12 | - You can come up with new ideas or with bug reports and file an [issue](https://github.com/vuesion/vuesion/issues/new)
13 | 
14 | - Or you can improve the [docs](https://github.com/vuesion/docs)
15 | 
16 | Thank you for using Vuesion! :smile:
17 | 


--------------------------------------------------------------------------------
/en/v4/guide/install.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | prev: false
 3 | ---
 4 | 
 5 | # Setup
 6 | 
 7 | ## Code
 8 | 
 9 | ### Prerequisites
10 | 
11 | 1. Install Node.js version 14
12 |    1. If you have Node.js already installed check your version with `node --version`
13 |    2. Project may not work with other versions of Node.js, please report any [issues here](https://github.com/vuesion/vuesion/issues/new?assignees=&labels=&template=bug_report.md)
14 |    3. To easily change the Node version we recommend to use the [n package](https://www.npmjs.com/package/n)
15 |       1. Run `npm i -g n`
16 |       2. Run `sudo n v14`
17 |       3. Check your Node version with `node --version`
18 | 2. Get an IDE, we recommend [Webstorm](https://www.jetbrains.com/webstorm/) or [Visual Studio Code](https://code.visualstudio.com/) with the [Volar plugin](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
19 | 3. Configure your Code Editor for [Prettier](https://prettier.io/docs/en/editors.html) to automatically get code-formatting
20 | 4. Style your IDE (Optional)
21 |    1. [Webstorm](https://plugins.jetbrains.com/plugin/12226-vuesion-theme)
22 |    2. [Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=vuesion.vuesion-theme)
23 | 
24 | ### Installation
25 | 
26 | ::: warning Running npx globally on Windows
27 | If you have any trouble with installing vuesion on Windows. This might help trouble-shooting: [https://github.com/zkat/npx/issues/146](https://github.com/zkat/npx/issues/146#issuecomment-384016791)
28 | :::
29 | 
30 | 
31 | 1. Run `npx @vuesion/create [project-name]`, for example `npx @vuesion/create my-app`
32 | 2. Change directory `cd [project-name]`, for example `cd my-app`
33 | 3. Install dependencies `npm install`
34 | 
35 | 
36 | ## Figma
37 | Figma is a web-based graphics editing and user interface design app. 
38 | You can use it to do all kinds of graphic design work from wireframing websites, 
39 | designing mobile app interfaces, prototyping designs and everything in between.
40 | 
41 | ### Prerequisites
42 | 
43 | 1. Get a [free Figma account](https://www.figma.com/signup)
44 | 2. Log in to your [Figma account](https://www.figma.com/)
45 | 
46 | ### Installation
47 | 
48 | 1. Got to the [Vuesion Core Community File](https://www.figma.com/community/file/1080868611324978249)
49 | 2. Click on `Duplicate` in the upper right corner
50 | 


--------------------------------------------------------------------------------
/en/v4/guide/run.md:
--------------------------------------------------------------------------------
  1 | # Development
  2 | 
  3 | ## Storybook
  4 | 
  5 | > [Storybook](https://storybook.js.org/) is an open source tool for building UI components and pages in isolation.
  6 | It streamlines UI development, testing, and documentation.
  7 | 
  8 | ### Get familiar with the Design System and its components
  9 | 
 10 | To see and interact with the Components that are available with the Vuesion Design System run `npm run storybook:dev`.
 11 | The script will open [http://localhost:6006](http://localhost:6006) in your browser.
 12 | 
 13 | #### Design System Tokens
 14 | 
 15 | Design tokens are all the values needed to construct and maintain a design system. Please read the documentation
 16 | of the corresponding Stories for
 17 | 
 18 | - [Color Palette](http://localhost:6006?path=/story/foundation-general--color-palette)
 19 | - [Color Tokens](http://localhost:6006?path=/story/foundation-general--color-tokens)
 20 | - [Utility Component Tokens](http://localhost:6006?path=/story/foundation-general--utility-component-tokens)
 21 | - [Spacing](http://localhost:6006?path=/story/foundation-general--spacings)
 22 | 
 23 | #### Design System deep dive
 24 | 
 25 | If you want to know more about the architecture of the Design
 26 | Systems, Layout components or theming, [read the Design System deep dive](../deep_dives/design-system)
 27 | 
 28 | ## Nuxt.js
 29 | 
 30 | > [Nuxt.js](https://nuxtjs.org/) is a framework for creating Vue.js applications. Its goal is to help Vue developers take advantage of
 31 | server-side-rendering and a unified module system to enhance the developer and user-experience.
 32 | 
 33 | ### Run your application
 34 | 
 35 | To test if everything works as expected run the following command: `npm run dev`.
 36 | 
 37 | It will open [http://localhost:3000](http://localhost:3000) and show you the Nuxt.js loading screen.
 38 | 
 39 | ### Development mode and hot reloading
 40 | 
 41 | Your application currently runs in development mode, which means that Nuxt.js watches for changes.
 42 | 
 43 | Every file in the `./src` directory will be hot reloaded, so you don't have to reload your browser or restart the dev
 44 | server during development.
 45 | 
 46 | That guarantees a good dev experience and will make you much more productive.
 47 | 
 48 | ::: warning CSS changes
 49 | CSS changes on page-level sometimes require a reload.
 50 | :::
 51 | 
 52 | ::: tip i18n
 53 | The only files that are not hot-reloaded are the files in the `./i18n` directory; you have to reload your browser to
 54 | reflect the changes.
 55 | :::
 56 | 
 57 | ### Change web-server port
 58 | 
 59 | Your app runs on port `3000` by default, set the `PORT` environment variable to configure a different port
 60 | e.g. `npm run dev -- --port 8080` in development mode or `PORT=8080 npm start` for your production build.
 61 | 
 62 | ## Docker
 63 | 
 64 | > [Docker](https://www.docker.com/), a subset of the Moby project, is a software framework for building, running, and managing containers on servers and the cloud.
 65 | 
 66 | The application can be served via Docker too.
 67 | 
 68 | In order to build the image run:
 69 | 
 70 | ```bash
 71 | npm run ci && docker build -t "Vuesion:latest" .
 72 | ```
 73 | 
 74 | When building is complete, you can proceed with firing up the Docker container:
 75 | 
 76 | ```bash
 77 | docker run -it --name Vuesion -p 3001:3000 Vuesion:latest
 78 | ```
 79 | 
 80 | You have to wait for the message:
 81 | 
 82 | ```bash
 83 |    ╭────────────────────────────────────────╮
 84 |    │                                        │
 85 |    │   Nuxt @ v2.15.2                       │
 86 |    │                                        │
 87 |    │   ▸ Environment: production            │
 88 |    │   ▸ Rendering:   server-side           │
 89 |    │   ▸ Target:      server                │
 90 |    │                                        │
 91 |    │   Memory usage: 123 MB (RSS: 181 MB)   │
 92 |    │                                        │
 93 |    │   Listening: http://172.17.0.2:3000/   │
 94 |    │                                        │
 95 |    ╰────────────────────────────────────────╯
 96 | ```
 97 | 
 98 | Docker is available at port: 3001 so a developer can have both Docker and local server running at the same time
 99 | 
100 | Now that you know everything works as expected, see Vuesion in action at [http://localhost:3001](http://localhost:3001).
101 | 


--------------------------------------------------------------------------------
/en/v4/guide/test.md:
--------------------------------------------------------------------------------
 1 | # Testing
 2 | 
 3 | ## Run tests
 4 | 
 5 | Your app is installed and runs in development mode but does every component in the app work correctly?
 6 | 
 7 | To check if all the features, components, services, etc. work as intended, you should run the test suite
 8 | with `npm run test`.
 9 | 
10 | You will see something like this:
11 | 
12 | ```bash
13 | ---------------|---------|----------|---------|---------|-------------------
14 | File           | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
15 | ---------------|---------|----------|---------|---------|-------------------
16 | All files      |     100 |      100 |     100 |     100 |   
17 | 
18 | ...
19 | 
20 | Test Suites: 63 passed, 63 total
21 | Tests:       255 passed, 255 total
22 | Snapshots:   0 total
23 | Time:        9.633 s
24 | Ran all test suites.
25 | 
26 | Process finished with exit code 0
27 | ```
28 | 
29 | It shows that you have an application that is well tested and from now on
30 | you should get feedback if you accidentally break included features when you run the tests.
31 | 
32 | The `npm test` command will be executed in the before-commit hook.
33 | That will guarantee that the code you are going to commit will not break the application.
34 | 
35 | ## Testing Library
36 | 
37 | > [The Testing Library](https://testing-library.com/docs/vue-testing-library/intro) family of libraries is a very
38 | > light-weight solution for testing without all the implementation details.
39 | 
40 | Vuesion uses the testing library to encourage good testing practices. To get familiar with the testing library
41 | have a look at the tests provided from Vuesion and have a look
42 | at [the documentation](https://testing-library.com/docs/vue-testing-library/intro).
43 | 
44 | ## Configuring test coverage
45 | 
46 | By default, the coverage threshold is set to `100`%.
47 | 
48 | If you think this is just too much for your project, configure the appropriate thresholds in the `./jest.config.js`.
49 | 
50 | ```js
51 | "coverageThreshold": {
52 |     "global": {
53 |         "branches": 100, 
54 |         "functions": 100, 
55 |         "lines": 100, 
56 |         "statements": 100
57 |     }
58 | },
59 | ```
60 | 


--------------------------------------------------------------------------------
/en/v4/introduction.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | prev: false
 3 | next: ./guide/install
 4 | ---
 5 | 
 6 | # Introduction
 7 | 
 8 | The goal of Vuesion is to increase the speed of product development. 
 9 | It's main purpose is to be able to quickly validate product ideas and iterate fast in order to pivot when neccessary.
10 | This boilerplate takes advantage of Nuxt.js and its vast ecosystem and glues together modern best practices across engineering & design.
11 | 
12 | For example, we use the Nuxt.js modules for generic functionality, but we also provide solutions to problems that appear by integrating
13 | with other Nuxt.js modules.
14 | 
15 | We also provide a design-system that you can customize 100% to fit your brand identity.
16 | Out of experience, we decided against an existing UI library or UI Framework.
17 | We learned that they only work to a certain degree and quickly start to slow down the product validation process.
18 | 
19 | In order to come up with a genuine product, it is often necessary to have a very specific design language and 
20 | the number of phrases like **_"I cannot change that because the library does not support it."_** increases quickly.
21 | 
22 | Vuesion gives you the most common use-cases and components - **The code is all yours** to modify and build upon.
23 | 
24 | ::: tip No Excuses
25 | The limitations of your product are up to the imagination of the designers and your ability to implement their feature requests.
26 | :::
27 | 
28 | This is an ever-evolving project,
29 | if you want to help, or you have an idea how to improve this project -
30 | **feel free to file an [issue](https://github.com/vuesion/vuesion/issues)**
31 | 


--------------------------------------------------------------------------------
/en/v5/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | home: true
3 | heroImage: /logo.png
4 | actionText: Get Started →
5 | actionLink: ./guide/introduction
6 | footer: MIT Licensed | Copyright © 2018 - present Werner-Most Ideen GmbH
7 | ---
8 | 


--------------------------------------------------------------------------------
/en/v5/guide/community-and-support.md:
--------------------------------------------------------------------------------
 1 | # Community and Support
 2 | 
 3 | ## Contribute
 4 | 
 5 | If you like this project and want to help make it even better, please consider contributing.
 6 | 
 7 | - Join our [Discord](https://discord.gg/59x5cg2) server to help build our community.
 8 | - [Tweet about this project](https://twitter.com/intent/tweet?text=I%20used%20%40vuesion1%20for%20my%20project%20and%20I%20really%20enjoyed%20it%20you%20should%20give%20it%20a%20try!&url=https://github.com/vuesion/vuesion&via=vuesion1&hashtags=vuesion,VueJS,NuxtJs,vue,nuxt) to make it more popular.
 9 | - Write code and create PRs. Please read the [contribution guidelines](https://github.com/vuesion/vuesion/blob/master/CONTRIBUTING.md).
10 | - Come up with new ideas or report bugs by filing an [issue](https://github.com/vuesion/vuesion/issues/new).
11 | - Improve the [docs](https://github.com/vuesion/docs).
12 | 
13 | Thank you for using Vuesion! 😊
14 | 
15 | ## Contact
16 | 
17 | For any questions or support, please reach out through our [Discord](https://discord.gg/59x5cg2) server
18 | or file an [issue](https://github.com/vuesion/vuesion/issues/new) on GitHub.
19 | 


--------------------------------------------------------------------------------
/en/v5/guide/concepts.md:
--------------------------------------------------------------------------------
 1 | # Concepts
 2 | 
 3 | ## Flux Architecture
 4 | 
 5 | Flux is an architectural pattern used for building client-side web applications.
 6 | It emphasizes unidirectional data flow, making the state management of the application more predictable.
 7 | In Flux, actions are dispatched to a central dispatcher, which then updates the stores that hold the
 8 | application's state. The views listen to these stores and re-render when the state changes.
 9 | This pattern helps manage complex applications by decoupling different parts of the application and
10 | making the data flow more transparent and easier to debug.
11 | 
12 | Read more about Flux [here](https://www.freecodecamp.org/news/an-introduction-to-the-flux-architectural-pattern-674ea74775c9/).
13 | 
14 | <mermaid>
15 | flowchart LR
16 |     View((View)) -- dispatch --> Action
17 |     Action((Action)) -- mutate --> State
18 |     State((State)) -- render --> View
19 | </mermaid>
20 | 
21 | For a concrete implementation in Vuesion, we use [Pinia](https://pinia.vuejs.org/),
22 | a state management library for Vue.js that follows the Flux architecture principles.
23 | 
24 | ## Developing Re-usable Components
25 | 
26 | Creating reusable components is crucial for maintaining a clean and efficient codebase.
27 | Reusable components help in reducing redundancy, enhancing consistency across the application,
28 | and making the development process faster and more manageable.
29 | 
30 | ### Container/Presentational Pattern
31 | 
32 | The Container/Presentational pattern is a design pattern that separates components into two categories:
33 | - **Presentational Components**: Focus on how things look. They exclusively receive data and emit events.
34 | - **Container Components**: Focus on how things work. They provide the data and behavior to presentational components or other container components.
35 | 
36 | This pattern enhances the separation of concerns and makes components more reusable and easier to test.
37 | 
38 | Read more about the Container/Presentational pattern [here](https://www.patterns.dev/react/presentational-container-pattern/).
39 | 
40 | ### Storybook
41 | 
42 | Storybook is an open-source tool for developing UI components in isolation.
43 | It allows developers to create and test components independently from the main application,
44 | which improves the development workflow by making it easier to spot issues and iterate on components.
45 | Benefits of using Storybook include:
46 | 
47 | - **Isolation**: Work on one component at a time.
48 | - **Documentation**: Automatically generate a living style guide.
49 | - **Testing**: Test components in various states and edge cases.
50 | 
51 | Read more about Storybook [here](https://storybook.js.org/).
52 | 
53 | ## Service Repository Pattern
54 | 
55 | The Service Repository Pattern separates the logic for retrieving data from the logic for processing that data.
56 | It involves creating repositories to handle data access and services to handle business logic.
57 | 
58 | In Vuesion, Prisma acts as the repository, handling database operations.
59 | Services are manually created in `./src/server/services` to encapsulate business logic.
60 | Using a code generator can streamline this process: `npm run new:rest-api`.
61 | 
62 | Read more about the Service Repository Pattern [here](https://medium.com/@ankitpal181/service-repository-pattern-802540254019).
63 | 
64 | ## Unit Testing with the Testing Library
65 | 
66 | The Testing Library is a set of tools for testing UI components in a way that resembles how users interact with them.
67 | It encourages testing best practices by focusing on accessibility and avoiding implementation details.
68 | Benefits include:
69 | - **User-centric testing**: Test components from the user's perspective.
70 | - **Less brittle tests**: Write more maintainable tests that are less prone to breaking due to changes in implementation details.
71 | 
72 | Read more about the Testing Library [here](https://testing-library.com/).
73 | 
74 | ## E2E Testing with Cypress.io
75 | 
76 | Cypress.io is an end-to-end testing framework designed for modern web applications.
77 | It provides a robust environment for writing, running, and debugging tests,
78 | ensuring that the entire application works as expected.
79 | Benefits of using Cypress.io include:
80 | - **Real-time reloads**: Automatically reloads tests as you make changes.
81 | - **Time travel**: See exactly what happened at each step in your tests.
82 | - **Debugging**: Powerful tools for debugging tests directly in the browser.
83 | 
84 | Read more about Cypress.io [here](https://www.cypress.io/).
85 | 


--------------------------------------------------------------------------------
/en/v5/guide/design-system.md:
--------------------------------------------------------------------------------
  1 | # Design System
  2 | ## Introduction
  3 | One of the main features of Vuesion is its comprehensive set of components. 
  4 | However, components alone are not enough to ensure a consistent user experience (UX). 
  5 | To achieve this, we need to define some guidelines that will ensure consistency across the application.
  6 | 
  7 | These rules also improve communication within the product team. 
  8 | Every color, text style, and spacing has a specific name and purpose.
  9 | 
 10 | ::: tip Better communication
 11 | By sharing [storybook](https://vuesion.herokuapp.com/storybook/) or the [Figma file](https://www.figma.com/community/file/1080868611324978249), 
 12 | you can enable everyone in your team to participate in product-related discussions.
 13 | :::
 14 | ## Architecture
 15 | ### Foundation
 16 | The foundation of the design system is the first abstraction layer and consists of:
 17 | 
 18 | - **Breakpoints**: Define the responsive behavior of the design system.
 19 | - **Color Palette**: Includes every color used in the design system.
 20 | - **Spacings**: Define the spacings used in the design system.
 21 | - **Typography**: Define size, weight, line-height, and letter spacings of your typography.
 22 | 
 23 | ### Design System Tokens
 24 | The second abstraction layer consists of Design System tokens, 
 25 | which help quickly redefine the design system and enable theming/white-labeling. The tokens include:
 26 | 
 27 | - Brand Variations (primary, neutral, warning, danger, success)
 28 | - Background Colors
 29 | - Surface Colors
 30 | - Border Colors
 31 | - Text Colors
 32 | - Interaction Colors
 33 | - Elevation (box-shadows)
 34 | - Accessibility (focus outlines)
 35 | 
 36 | ::: tip Typography Tokens
 37 | There are no tokens for common text styles. Feel free to add them if your theme requires different typography.
 38 | :::
 39 | ### Component Specific Variables
 40 | These variables are located in `./src/assets/design-system/variables/components` and form the final abstraction layer.
 41 | Each Vue component should reference only these variables, ensuring components are easy to change and theme.
 42 | 
 43 | ### Relations between abstraction layers
 44 | ```shell
 45 |                                         ┌───────────┐
 46 |                                   ┌─────┤Breakpoints├─────┐
 47 |                                   │     └───────────┘     │
 48 |                                   │     ┌─────────────┐   │
 49 |                                   │     │Color Palette├───┤
 50 |                                   │     └─────────────┘   │
 51 |                                   │     ┌────────┐        │
 52 |                                   ├─────┤Spacings├────────┤
 53 |                                   │     └────────┘        │
 54 |                                   │     ┌──────────┐      │
 55 |                                   ├─────┤Typography├──────┤
 56 |                                   │     └──────────┘      │
 57 |                                   │     ┌──────────┐      │
 58 |                                   │     │Foundation│◄─────┘
 59 |                                   │     └─────┬────┘
 60 |                                   │           ▼
 61 |  ┌───────────────┐                │     ┌────────────────────┐
 62 |  │   Component   │◄───────────────┴──── │Design System Tokens│    
 63 |  │   Specific    │                      └────────────────────┘
 64 |  │   Variables   │                      ▲
 65 |  └───────────────┘                      │    ┌────────────────┐
 66 |                                         ├────┤Brand Variations│
 67 |                                         │    └────────────────┘
 68 |                                         │    ┌─────────────────┐
 69 |                                         ├────┤Background Colors│
 70 |                                         │    └─────────────────┘
 71 |                                         │    ┌──────────────┐
 72 |                                         ├────┤Surface Colors│
 73 |                                         │    └──────────────┘
 74 |                                         │    ┌─────────────┐
 75 |                                         ├────┤Border Colors│
 76 |                                         │    └─────────────┘
 77 |                                         │    ┌───────────┐
 78 |                                         ├────┤Text Colors│
 79 |                                         │    └───────────┘
 80 |                                         │    ┌──────────────────┐
 81 |                                         ├────┤Interaction Colors│
 82 |                                         │    └──────────────────┘
 83 |                                         │    ┌─────────┐
 84 |                                         ├────┤Elevation│
 85 |                                         │    └─────────┘
 86 |                                         │    ┌─────────────┐
 87 |                                         ├────┤Accessibility│
 88 |                                         │    └─────────────┘
 89 |                                         │    ┌─────────┐
 90 |                                         └────┤Animation│
 91 |                                              └─────────┘
 92 | ```
 93 | 
 94 | ### Folder Structure
 95 | ```shell
 96 | design-system/
 97 | ├── README.md
 98 | ├── docs // Documentation and utilities for documentation
 99 | ├── mixins // SASS mixins that are used across components
100 | ├── themes // Theme files
101 | └── variables
102 |     ├── _breakpoints.scss // Foundation: Break point and viewport definition
103 |     ├── _color-palette.scss // Foundation: Color palette
104 |     ├── _spacings.scss // Foundation: available spacings for layout components, paddings, margins and any other spacings
105 |     ├── _typography.scss // Foundation: Font-families, Font-weights, Letter-spacings, Line-heights
106 |     ├── _variables.scss // Index file for all kinds of globally available SASS variables
107 |     └── components // Component Specific Variables
108 | ```


--------------------------------------------------------------------------------
/en/v5/guide/development.md:
--------------------------------------------------------------------------------
  1 | # Development
  2 | 
  3 | ## Project Structure
  4 | 
  5 | ### Folders
  6 | 
  7 | ```shell
  8 | ├── _templates // hygen templates for code generators
  9 | ├── cypress // e2e tests
 10 | ├── i18n // language files
 11 | ├── prisma // Database schema, migrations and seeds
 12 | ├── src
 13 | │   ├── assets
 14 | │   │   └── design-system
 15 | │   ├── components
 16 | │   │   ├── animations
 17 | │   │   ├── behavior
 18 | │   │   ├── data-display
 19 | │   │   ├── demo // can be deleted
 20 | │   │   ├── forms
 21 | │   │   ├── icons
 22 | │   │   ├── input-and-actions
 23 | │   │   ├── layout
 24 | │   │   ├── navigation
 25 | │   │   └── typography
 26 | │   ├── composables
 27 | │   ├── enums
 28 | │   ├── interfaces
 29 | │   ├── layouts
 30 | │   ├── pages
 31 | │   ├── plugins
 32 | │   ├── public
 33 | │   │   ├── demo // can be deleted
 34 | │   │   ├── illustrations // SVG assets
 35 | │   │   └── images // JPGs, PNGs, etc.
 36 | │   ├── server
 37 | │   │   ├── api // Controllers
 38 | │   │   ├── middleware
 39 | │   │   ├── services
 40 | │   │   └── utils
 41 | │   ├── services // for client-side application
 42 | │   ├── store // pinia stores
 43 | │   ├── test // test utils and setup
 44 | │   └── utils // Client- and Server-side utils
 45 | └── tools
 46 | ```
 47 | 
 48 | ### Clean up
 49 | 
 50 | The goal of the cleanup process is to bring the code base to a clean state without any demo content.
 51 | To achieve this, follow these steps:
 52 | 
 53 | 1. **Remove Demo Folders:**
 54 |     - Delete the following directories:
 55 |         - `./src/components/demo`
 56 |         - `./src/public/demo`
 57 |         - `./src/pages/services`
 58 | 
 59 | 2. **Clean Up Index Page:**
 60 |     - Edit `./src/pages/index.vue`:
 61 |         - Remove demo components.
 62 |         - Update the title and meta description to reflect your project.
 63 | 
 64 | 3. **Reset i18n Files:**
 65 |     - Clear the contents of files in `./i18n` and reset them to a plain JSON object `{}`.
 66 | 
 67 | Following these steps will help you remove any unnecessary demo content and prepare the code base
 68 | for your specific needs.
 69 | 
 70 | ## Best Practices
 71 | 
 72 | Implementing best practices is crucial for maintaining a high-quality, maintainable, and scalable codebase.
 73 | Adhering to established standards helps ensure consistency, reduces the likelihood of errors,
 74 | and makes it easier for new developers to understand and contribute to the project.
 75 | 
 76 | ### Code Style
 77 | 
 78 | We follow the official Vue.js style guide to maintain a consistent code style across our projects.
 79 | This includes recommendations on naming conventions, component structure, and more.
 80 | 
 81 | For more details, refer to the [Vue.js Style Guide](https://vuejs.org/style-guide/).
 82 | 
 83 | Additionally, we adhere to the Nuxt style guide using the `@nuxt/eslint` module.
 84 | This helps enforce consistent code quality and formatting in Nuxt.js projects.
 85 | 
 86 | For more information, see the [Nuxt Code Style Guide](https://nuxt.com/docs/guide/concepts/code-style).
 87 | 
 88 | ### Prisma.js
 89 | 
 90 | #### Migrations
 91 | 
 92 | Prisma Migrate is a powerful tool for managing your database schema and ensuring it stays in sync
 93 | with your application code. It provides a straightforward workflow for creating, applying,
 94 | and managing database migrations.
 95 | 
 96 | To understand the mental model behind Prisma Migrate and get started with migrations,
 97 | refer to
 98 | the [Prisma Migrate Guide](https://www.prisma.io/docs/orm/prisma-migrate/understanding-prisma-migrate/mental-model).
 99 | 
100 | #### Squash Migrations
101 | 
102 | Over time, your project may accumulate many migration files, which can slow down your CI/CD pipelines
103 | and make your project harder to manage. Squashing migrations is a workflow to combine multiple migration
104 | files into a single one, thus optimizing your migration history.
105 | 
106 | For a detailed guide on how to squash migrations with Prisma,
107 | visit the [Squashing Migrations Guide](https://www.prisma.io/docs/orm/prisma-migrate/workflows/squashing-migrations).
108 | 
109 | ## Development Tools
110 | 
111 | Vuesion provides a great developer experience with helpful npm scripts, code generators, and tools for managing i18n,
112 | making the development process efficient and enjoyable.
113 | 
114 | ### NPM Scripts
115 | 
116 | Here are the npm scripts available in Vuesion:
117 | 
118 | | NPM Script                      | Description                                                               |
119 | |---------------------------------|---------------------------------------------------------------------------|
120 | | `npm run dev`                   | Start the development server                                              |
121 | | `npm run storybook:dev`         | Start Storybook for developing UI components in isolation                 |
122 | | `npm run test`                  | Run tests with coverage                                                   |
123 | | `npm run lint`                  | Lint the codebase and run TypeScript checks                               |
124 | | `npm run new:component`         | Generate a new component using Hygen                                      |
125 | | `npm run new:store`             | Generate a new store using Hygen                                          |
126 | | `npm run new:page`              | Generate a new page using Hygen                                           |
127 | | `npm run new:rest-api`          | Generate a new REST API using Hygen                                       |
128 | | `npm run db:reset`              | Reset the database using Prisma Migrate                                   |
129 | | `npm run db:seed`               | Seed the database                                                         |
130 | | `npm run db:migrate`            | Create and apply new migrations                                           |
131 | | `npm run db:migrate-deploy`     | Apply pending migrations (only use in production)                         |
132 | | `npm run db:push`               | Push the schema state to the database                                     |
133 | | `npm run db:generate-client`    | Generate Prisma client                                                    |
134 | | `npm run extract-i18n-messages` | Extract internationalization messages from magic comments                 |
135 | | `npm run test:watch`            | Run tests in watch mode                                                   |
136 | | `npm run e2e`                   | Run end-to-end tests with Cypress                                         |
137 | | `npm run storybook:build`       | Build Storybook for production                                            |
138 | | `npm run release:major`         | Create a major release with changelog                                     |
139 | | `npm run release:minor`         | Create a minor release with changelog                                     |
140 | | `npm run release:patch`         | Create a patch release with changelog                                     |
141 | | `npm run build`                 | Build the project for production                                          |
142 | | `npm run build:analyze`         | Build the project with bundle analysis                                    |
143 | | `npm run build:spa`             | Generate a static site                                                    |
144 | | `npm run start`                 | Run the app in production mode                                            |
145 | | `npm run prepare`               | Used by husky to initialize pre-commit hooks                              |
146 | | `npm run pre-commit`            | Format staged files and run lint and tests concurrently before committing |
147 | 
148 | ### Code Generators
149 | 
150 | Code generators help streamline the development process by automating repetitive tasks, ensuring consistency, and
151 | reducing human error. Vuesion uses Hygen as its code generation tool. 
152 | 
153 | Hygen is highly customizable and allows developers
154 | to generate code based on templates, making it easier to maintain a consistent codebase. 
155 | 
156 | For more information, visit the [Hygen website](https://www.hygen.io/).
157 | 
158 | <img :src="$withBase('/v5/new-rest-api.gif')" alt="create a new rest-api with listing and details pages in seconds">
159 | 
160 | #### Presentational Components
161 | Presentational components are responsible for how things look. They exclusively receive data and emit events. 
162 | The command `npm run new:component` creates a `component.vue` file along with a `component.stories.ts` file with
163 | a default Storybook story and a `component.spec.ts` file with an initial unit test based on Vitest and Testing Library.
164 | 
165 | #### Pages
166 | Pages are container components responsible for how things work.
167 | The command `npm run new:page` creates a page component, and paths are allowed as the name of the component, 
168 | for example, `/books/[id]/index`. It also prompts whether you want to connect a store, 
169 | which is used to communicate with the backend, to the component.
170 | 
171 | #### Stores
172 | A Pinia store is a state management solution for Vue.js applications.
173 | It is useful for managing shared state across components.
174 | The command `npm run new:store` creates a store with all CRUD operations for a specified database entity.
175 | 
176 | #### RESTful APIs
177 | The command `npm run new:rest-api` will create GET, POST, PUT, DELETE endpoints for a specified database entity
178 | along with a store, interface, service, listings page, and details page.
179 | 
180 | ### Build and Deployment
181 | 
182 | To build the project for production, Vuesion provides several scripts:
183 | - `npm run build`: Builds the project for production.
184 | - `npm run build:analyze`: Builds the project with bundle analysis.
185 | - `npm run build:spa`: Generates a static site.
186 | 
187 | For more information on deployment, visit the [Nuxt.js Deployment Guide](https://nuxt.com/docs/getting-started/deployment).


--------------------------------------------------------------------------------
/en/v5/guide/getting-started.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | prev: false
 3 | ---
 4 | 
 5 | # Getting Started
 6 | 
 7 | ## Engineering
 8 | 
 9 | ### Prerequisites
10 | 
11 | 1. **Install Node.js version 20**
12 |    - Check your version with `node --version`
13 |    - If it’s not version 20, you can change it using the [n package](https://www.npmjs.com/package/n):
14 |      ```sh
15 |      npm install -g n
16 |      sudo n v20
17 |      node --version
18 |      ```
19 |    - If you encounter issues, please report them [here](https://github.com/vuesion/vuesion/issues/new?assignees=&labels=&template=bug_report.md).
20 | 
21 | 2. **Get an IDE**
22 |    - Recommended: [Webstorm](https://www.jetbrains.com/webstorm/) or [Visual Studio Code](https://code.visualstudio.com/) with the [Volar plugin](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar).
23 | 
24 | 3. **Configure Prettier**
25 |    - Set up [Prettier](https://prettier.io/docs/en/editors.html) in your code editor for automatic code formatting.
26 | 
27 | 4. **Install PostgreSQL (Optional)**
28 |    - Install PostgreSQL or another database you want to use with Prisma.js.
29 | 
30 | 5. **Style Your IDE (Optional)**
31 |    - [Webstorm Theme](https://plugins.jetbrains.com/plugin/12226-vuesion-theme)
32 |    - [VS Code Theme](https://marketplace.visualstudio.com/items?itemName=vuesion.vuesion-theme)
33 | 
34 | ### Installation
35 | 
36 | 1. **Create a New Project:**
37 |    ```sh 
38 |    npx @vuesion/create my-app
39 |    ```
40 | 2. **Change Directory:**
41 |    ```sh 
42 |    cd my-app
43 |    ```
44 | 3. **Create an .env File:**
45 |    - Copy the .env-example file to a new .env file:
46 |    ```sh 
47 |    cp .env-example .env
48 |    ```
49 |    - Change the `DATABASE_URL` to use your local project database
50 |    ```sh 
51 |    DATABASE_URL="postgresql://postgres:postgres@localhost:5432/my-app?schema=public"
52 |    ```
53 | 
54 | ## Design
55 | 
56 | ### Figma
57 | Figma is a web-based graphics editing and user interface design app.
58 | Use it for wireframing websites, designing mobile app interfaces,
59 | prototyping designs, and more.
60 | 
61 | ### Prerequisites
62 | 
63 | 1. Get a [free Figma account](https://www.figma.com/signup)
64 | 2. Log in to your [Figma account](https://www.figma.com/)
65 | 
66 | ### Installation
67 | 
68 | 1. Got to the [Vuesion Core Community File](https://www.figma.com/community/file/1080868611324978249)
69 | 2. Click on the `Open in Figma` button


--------------------------------------------------------------------------------
/en/v5/guide/introduction.md:
--------------------------------------------------------------------------------
 1 | # Introduction
 2 | 
 3 | The goal of Vuesion is to increase the speed of product development. Its main purpose is to be able to quickly validate product ideas and iterate fast in order to pivot when necessary. This boilerplate takes advantage of Nuxt.js and its vast ecosystem and glues together modern best practices across engineering & design.
 4 | 
 5 | For example, we use the Nuxt.js modules for generic functionality, but we also provide solutions to problems that appear by integrating with other Nuxt.js modules.
 6 | 
 7 | We also provide a design system that you can customize 100% to fit your brand identity. Out of experience, we decided against an existing UI library or UI Framework. We learned that they only work to a certain degree and quickly start to slow down the product validation process.
 8 | 
 9 | In order to come up with a genuine product, it is often necessary to have a very specific design language and the number of phrases like **_"I cannot change that because the library does not support it."_** increases quickly.
10 | 
11 | Vuesion gives you the most common use-cases and components - **The code is all yours** to modify and build upon.
12 | 
13 | ::: tip No Excuses
14 | The limitations of your product are up to the imagination of the designers and your ability to implement their feature requests.
15 | :::
16 | 
17 | This is an ever-evolving project. If you want to help, or you have an idea how to improve this project - **feel free to file an [issue](https://github.com/vuesion/vuesion/issues)**
18 | 
19 | ## Why Choose Vuesion?
20 | 
21 | - **Rapid Prototyping:** Quickly validate and iterate on product ideas.
22 | - **Customizable Design System:** Tailor the design to fit your brand without constraints from existing UI libraries.
23 | - **Modern Best Practices:** Leverages the best practices in engineering and design, integrating seamlessly with Nuxt.js.
24 | - **Community Support:** Benefit from an active community ready to help and collaborate.
25 | - **Ownership and Flexibility:** Complete control over the codebase, allowing for modifications and extensions to suit specific needs.
26 | 
27 | ## Key Features
28 | - **Comprehensive Design System:** Pre-built with 35+ customizable components, Figma UIKit integration, and theming support.
29 | - **Developer Experience:** TypeScript, ESLint, Prettier, Husky hooks, and semantic releases ensure high code quality and maintainability.
30 | - **Code Generation:** Vuesion includes a generator framework to easily create code based on a customizable style guide.
31 | - **Robust Testing Setup:** E2E testing with Cypress, Vitest, and Testing-library with 250+ example tests.
32 | - **Internationalization (i18n):** Scripts included to simplify translation management, making it easier to build multilingual applications.
33 | - **Versatile Core:** Nuxt.js support for server-side rendering, static site generation, and single-page applications.
34 | - **Fully Set Up and Ready-to-Go:** Storybook, Authentication, Security, PWA, Color Mode, and Libraries for Animations and Form Validation.
35 | 
36 | For more information visit the [official website](https://vuesion.herokuapp.com/) and the [GitHub repository](https://github.com/vuesion/vuesion).
37 | 


--------------------------------------------------------------------------------
/en/v5/tutorials/i18n.md:
--------------------------------------------------------------------------------
  1 | # I18n
  2 | 
  3 | If you want to support multiple languages in your project.
  4 | Vuesion has some useful tools to make it easier to manage your translations.
  5 | 
  6 | ## Default locale and supported locales
  7 | 
  8 | To tell the tooling which locale is your default locale you have to define it in the file: `./nuxt.config.ts`.
  9 | 
 10 | You can also add as many other locales as you want to support.
 11 | The `extract-i18n-messages` script will add these translation files with the default messages defined for the default locale.
 12 | 
 13 | Example config:
 14 | 
 15 | ```js
 16 | ...
 17 | // Don't forget to update the extract-i18n-script
 18 | locales: [
 19 |     { code: 'en-US', iso: 'en-US', file: 'en-US.json', isCatchallLocale: true },
 20 |     { code: 'de-DE', iso: 'de-DE', file: 'de-DE.json' },
 21 | ],
 22 | ...
 23 | ```
 24 | 
 25 | ## Define and extract default messages
 26 | 
 27 | Open up a file, e.g. `./src/pages/index.vue`:
 28 | 
 29 | ```html
 30 | <template>
 31 |     <vue-stack space="0" as="main">
 32 |         <landing-page-hero-section />
 33 |       ...
 34 |     </vue-stack>
 35 | </template>
 36 | ```
 37 | 
 38 | and add a translation for our default locale (`en-US`):
 39 | 
 40 | ```html
 41 | <template>
 42 |     <vue-stack space="0" as="main">
 43 |         {{ $t('home.test' /* this is a test!!! */) }}
 44 |         <landing-page-hero-section />
 45 |         ...
 46 |     </vue-stack>
 47 | </template>
 48 | ```
 49 | 
 50 | Now run `npm run extract-i18n-messages` and go to [http://localhost:3000/](http://localhost:3000/).
 51 | 
 52 | You should see the message `this is a test!!!` one the top-left of the screen.
 53 | 
 54 | If you open up the file `./i18n/en-US.json` you should see a new key with the default message as value:
 55 | 
 56 | ```json
 57 | {
 58 | ...
 59 |   "home.test": "this is a test!!!"
 60 | }
 61 | ```
 62 | 
 63 | You should also see that the file `./i18n/de-DE.json` has the exact same key and value added.
 64 | 
 65 | Let's translate it into German:
 66 | 
 67 | ```json
 68 | {
 69 | ...
 70 |   "home.test": "das ist ein Test!!!"
 71 | }
 72 | ```
 73 | 
 74 | and run `npm run extract-i18n-messages` again.
 75 | 
 76 | **The translated value is not overwritten because it is not the default locale.**
 77 | 
 78 | If you change the default message in your Vue component:
 79 | 
 80 | ```html
 81 | <template>
 82 |     <vue-stack space="0" as="main">
 83 |         {{ $t('home.test' /* this is not a test!!! */) }}
 84 |         <landing-page-hero-section />
 85 |         ...
 86 |     </vue-stack>
 87 | </template>
 88 | ```
 89 | 
 90 | and run `npm run extract-i18n-messages` again.
 91 | 
 92 | You will have a new value in `./i18n/en-US.json`:
 93 | 
 94 | ```json
 95 | {
 96 | ...
 97 |   "home.test": "this is not a test!!!"
 98 | }
 99 | ```
100 | 
101 | but the value in `./i18n/de-DE.json` will stay the same:
102 | 
103 | ```json
104 | {
105 | ...
106 |   "home.test": "das ist ein Test!!!"
107 | }
108 | ```
109 | 
110 | ## Known limitations
111 | 
112 | If you want to add HTML to your default messages inside a template, you have to use `[]` instead of `<>` e.g.:
113 | 
114 | ```html
115 | <template>
116 |   <div>
117 |     <div v-html="$t('home.link' /* [a href='https://example.com' target='_blank']this is a link[/a] */)" />
118 |     ...
119 |   </div>
120 | </template>
121 | ```
122 | 


--------------------------------------------------------------------------------
/en/v5/tutorials/layout-components.md:
--------------------------------------------------------------------------------
 1 | # Layout Components
 2 | The Layout components mimic the Auto Layout feature from Figma and come with everything you need
 3 | to build responsive designs.
 4 | 
 5 | ### [Box](https://vuesion.herokuapp.com/storybook/?path=/story/foundation-layout--box)
 6 | The Box component creates spacings around components and provides positioning options.
 7 | Tip: To make components more reusable, avoid adding outer spacings directly to them; instead, 
 8 | wrap them in a Box component.
 9 | 
10 | <img :src="$withBase('/v5/vue-box.png')" alt="vue-box component">
11 | 
12 | ```html
13 | <vue-box padding="16 24">
14 |     <vue-text>This is a Test</vue-text>
15 | </vue-box>
16 | ```
17 | 
18 | ### [Columns](https://vuesion.herokuapp.com/storybook/?path=/story/foundation-layout--columns)
19 | Columns provide horizontal spacings between components. 
20 | By default, components are equally distributed, but each column can have a specific width. 
21 | Columns can be stacked, making them ideal for creating forms or general layouts. 
22 | Tip: Columns don't provide vertical space, so pair them with the Stack component.
23 | 
24 | <img :src="$withBase('/v5/vue-columns.png')" alt="vue-columns component">
25 | 
26 | ```html
27 | <vue-columns space="16" padding="16 24">
28 |     <vue-column>
29 |         <vue-text>This is a Test</vue-text>
30 |     </vue-column>
31 |     <vue-column>
32 |         <vue-text>This is a Test</vue-text>
33 |     </vue-column>
34 | </vue-columns>
35 | ```
36 | 
37 | ### [ContentBlock](https://vuesion.herokuapp.com/storybook/?path=/story/foundation-layout--content-block)
38 | The ContentBlock component sets a maximum width for all breakpoints, 
39 | limiting the content width of a page or component.
40 | 
41 | ### [Inline](https://vuesion.herokuapp.com/storybook/?path=/story/foundation-layout--inline)
42 | Inline provides both horizontal and vertical spacings between components, 
43 | displaying them with their inline width. It can be stacked and is excellent for creating a list of elements.
44 | 
45 | <img :src="$withBase('/v5/vue-inline.png')" alt="vue-inline component">
46 | 
47 | ```html
48 | <vue-inline space="8" padding="16 24">
49 |     <vue-badge>Label</vue-badge>
50 |     <vue-badge>Label</vue-badge>
51 |     <vue-badge>Label</vue-badge>
52 |     <vue-badge>Label</vue-badge>
53 | </vue-inline>
54 | ```
55 | 
56 | ### [Masonry](https://vuesion.herokuapp.com/storybook/?path=/story/foundation-layout--masonry)
57 | Masonry offers horizontal and vertical spacings between components, 
58 | displaying them with equal width and varying height. 
59 | Tip: It supports only 3 columns and has a fixed responsive behavior.
60 | 
61 | ### [Stack](https://vuesion.herokuapp.com/storybook/?path=/story/foundation-layout--stack)
62 | Stack provides vertical spacings between components, displaying them with their original height.
63 | 
64 | <img :src="$withBase('/v5/vue-stack.png')" alt="vue-stack component">
65 | 
66 | ```html
67 | <vue-stack space="8" padding="16 24">
68 |     <vue-badge>Label</vue-badge>
69 |     <vue-badge>Label</vue-badge>
70 |     <vue-badge>Label</vue-badge>
71 |     <vue-badge>Label</vue-badge>
72 | </vue-stack>
73 | ```
74 | 
75 | ### [Tiles](https://vuesion.herokuapp.com/storybook/?path=/story/foundation-layout--tiles)
76 | Tiles provide both horizontal and vertical spacings between components. 
77 | Components are equally distributed by default. 
78 | Tip: You can configure the number of columns as well as the vertical and horizontal space independently.
79 | 


--------------------------------------------------------------------------------
/en/v5/tutorials/theming.md:
--------------------------------------------------------------------------------
  1 | # Theming
  2 | 
  3 | ### Creating the theme file
  4 | 
  5 | 1. Create a new file in `./src/assets/design-system/themes`, e.g. `halloween.scss`
  6 | 2. Copy the contents of the file `./src/assets/design-system/themes/dark.scss` and paste them into your theme file
  7 | 3. Change the root class name to `.halloween`
  8 | 4. Replace the values of the variables with your new values
  9 | 
 10 | ```css
 11 | /**
 12 |  Variable Nomenclature:
 13 |  1. Brand (global namespace)
 14 |  2. Application (css property or purpose)
 15 |  3. Brand Variation (primary, warning, danger, success, inverse, default)
 16 |  4. Emphasis (optional)
 17 |  5. State (optional)
 18 | */
 19 | 
 20 | :root.halloween {
 21 |     /* Brand Variations */
 22 |     --primary: #de4300;
 23 |     --neutral: #{palette-color-level('neutral', 7)};
 24 |     --success: #{palette-color-level('success', 7)};
 25 |     --info: #{palette-color-level('info', 7)};
 26 |     --warning: #{palette-color-level('warning', 7)};
 27 |     --danger: #{palette-color-level('danger', 7)};
 28 | 
 29 |     /* Background Colors */
 30 |     --bg-default-high: #{palette-color-level('neutral', 10)};
 31 |     --bg-default-medium: #{palette-color-level('neutral', 9)};
 32 |     --bg-default-low: #{palette-color-level('neutral', 8)};
 33 |     --bg-inverse-high: #{palette-color-level('neutral', 1)};
 34 |     --bg-inverse-medium: #{palette-color-level('neutral', 2)};
 35 |     --bg-inverse-low: #{palette-color-level('neutral', 3)};
 36 | 
 37 |     /* Surface Colors */
 38 |     --surface-default-high: #{palette-color-level('neutral', 9)};
 39 |     --surface-default-medium: #{palette-color-level('neutral', 8)};
 40 |     --surface-default-low: #{palette-color-level('neutral', 7)};
 41 |     --surface-inverse-high: #{palette-color-level('neutral', 0)};
 42 |     --surface-inverse-medium: #{palette-color-level('neutral', 1)};
 43 |     --surface-inverse-low: #{palette-color-level('neutral', 2)};
 44 |     --surface-info-high: #{palette-color-level('info', 8)};
 45 |     --surface-info-medium: #{palette-color-level('info', 9)};
 46 |     --surface-info-low: #{palette-color-level('info', 10)};
 47 |     --surface-danger-high: #{palette-color-level('danger', 8)};
 48 |     --surface-danger-medium: #{palette-color-level('danger', 9)};
 49 |     --surface-danger-low: #{palette-color-level('danger', 10)};
 50 |     --surface-warning-high: #{palette-color-level('warning', 8)};
 51 |     --surface-warning-medium: #{palette-color-level('warning', 9)};
 52 |     --surface-warning-low: #{palette-color-level('warning', 10)};
 53 |     --surface-success-high: #{palette-color-level('success', 8)};
 54 |     --surface-success-medium: #{palette-color-level('success', 9)};
 55 |     --surface-success-low: #{palette-color-level('success', 10)};
 56 | 
 57 |     /* Border Colors */
 58 |     --border-default-high: #{palette-color-level('neutral', 6)};
 59 |     --border-default-medium: #{palette-color-level('neutral', 7)};
 60 |     --border-default-low: #{palette-color-level('neutral', 8)};
 61 |     --border-inverse-high: #{palette-color-level('neutral', 9)};
 62 |     --border-inverse-medium: #{palette-color-level('neutral', 8)};
 63 |     --border-inverse-low: #{palette-color-level('neutral', 7)};
 64 |     --border-info-high: #{palette-color-level('info', 6)};
 65 |     --border-info-medium: #{palette-color-level('info', 7)};
 66 |     --border-info-low: #{palette-color-level('info', 8)};
 67 |     --border-danger-high: #{palette-color-level('danger', 6)};
 68 |     --border-danger-medium: #{palette-color-level('danger', 7)};
 69 |     --border-danger-low: #{palette-color-level('danger', 8)};
 70 |     --border-warning-high: #{palette-color-level('warning', 6)};
 71 |     --border-warning-medium: #{palette-color-level('warning', 7)};
 72 |     --border-warning-low: #{palette-color-level('warning', 8)};
 73 |     --border-success-high: #{palette-color-level('success', 6)};
 74 |     --border-success-medium: #{palette-color-level('success', 7)};
 75 |     --border-success-low: #{palette-color-level('success', 8)};
 76 | 
 77 |     /* Text Colors */
 78 |     --text-default-high: #{palette-color-level('neutral', 0)};
 79 |     --text-default-medium: #{palette-color-level('neutral', 2)};
 80 |     --text-default-low: #{palette-color-level('neutral', 4)};
 81 |     --text-inverse-high: #{palette-color-level('neutral', 10)};
 82 |     --text-inverse-medium: #{palette-color-level('neutral', 7)};
 83 |     --text-inverse-low: #{palette-color-level('neutral', 6)};
 84 |     --text-info: #{palette-color-level('info', 7)};
 85 |     --text-danger: #{palette-color-level('danger', 7)};
 86 |     --text-warning: #{palette-color-level('warning', 7)};
 87 |     --text-success: #{palette-color-level('success', 7)};
 88 |     --text-link: #{palette-color-level('info', 4)};
 89 |     --text-light: #{palette-color-level('neutral', 0)};
 90 |     --text-dark: #{palette-color-level('neutral', 10)};
 91 | 
 92 |     /* Interaction Colors */
 93 |     --interaction-primary-enabled: #ff4d00;
 94 |     --interaction-primary-hovered: #ff7036;
 95 |     --interaction-primary-activated: #de4300;
 96 | 
 97 |     --interaction-neutral-enabled: #{palette-color-level('neutral', 9)};
 98 |     --interaction-neutral-hovered: #{palette-color-level('neutral', 8)};
 99 |     --interaction-neutral-activated: #{palette-color-level('neutral', 10)};
100 | 
101 |     --interaction-danger-enabled: #{palette-color-level('danger', 6)};
102 |     --interaction-danger-hovered: #{palette-color-level('danger', 5)};
103 |     --interaction-danger-activated: #{palette-color-level('danger', 7)};
104 | 
105 |     --interaction-warning-enabled: #{palette-color-level('warning', 6)};
106 |     --interaction-warning-hovered: #{palette-color-level('warning', 5)};
107 |     --interaction-warning-activated: #{palette-color-level('warning', 7)};
108 | 
109 |     --interaction-success-enabled: #{palette-color-level('success', 6)};
110 |     --interaction-success-hovered: #{palette-color-level('success', 5)};
111 |     --interaction-success-activated: #{palette-color-level('success', 7)};
112 | 
113 |     --interaction-secondary-enabled: #{palette-color-level('info', 1)};
114 |     --interaction-secondary-hovered: #{palette-color-level('info', 2)};
115 |     --interaction-secondary-activated: #{palette-color-level('info', 3)};
116 | 
117 |     /* UTILS */
118 |     /* Elevation */
119 |     --elevation-1: 0px 1px 2px -1px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.1);
120 |     --elevation-2: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
121 |     --elevation-3: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
122 |     --elevation-4: 0px 8px 10px -6px rgba(0, 0, 0, 0.1), 0px 20px 25px -5px rgba(0, 0, 0, 0.1);
123 | 
124 |     /* A11y */
125 |     --focused: 0 0 0 #{$space-2} #{palette-color-level('neutral', 10)},
126 |     0 0 0 #{$space-4} #de4300;
127 | 
128 |     /* Animation Language */
129 |     --transition-duration: 250ms;
130 |     --easing-curve: cubic-bezier(0.17, 0.67, 0.83, 0.67);
131 |     --fade-animation-transition: opacity var(--transition-duration) var(--easing-curve);
132 | }
133 | 
134 | ```
135 | 
136 | ### Let SASS know about the new theme
137 | 
138 | 1. Open `./src/assets/global.scss` and import your theme file
139 | 
140 | ```css
141 | @import 'design-system/mixins/mixins';
142 | @import 'design-system/variables/variables';
143 | @import 'design-system/themes/light';
144 | @import 'design-system/themes/dark';
145 | @import 'design-system/themes/halloween'; /* new theme */
146 | ```
147 | 
148 | 2. Search for occurrences of `add-theme-variable` (e.g. `./src/assets/global.scss`) and add the new theme
149 | 
150 | ```css
151 | @include add-theme-variable(
152 |   'landing-hero-link-color',
153 |   (
154 |     'light': palette-color-level('info', 4),
155 |     'dark': palette-color-level('info', 6),
156 |     'halloween': palette-color-level('info', 6), /* new theme */
157 |   )
158 | );
159 | ```
160 | 
161 | ### Let Storybook know about the new theme
162 | 
163 | 1. Open `./.storybook/preview.js`
164 | 2. Add new theme
165 | 
166 | ```js
167 | export const parameters = {
168 |     ...
169 |     themeSwitcher: {
170 |         themes: [
171 |           ...
172 |           { label: 'Halloween Theme', value: 'halloween' },
173 |         ],
174 |     },
175 |     ...
176 | };
177 | ```
178 | 
179 | ### Let your application know about the new theme
180 | 
181 | 1. Open `./src/layouts/default.vue`
182 | 2. Add new theme
183 | 
184 | ```js
185 | const themes = computed(() => [
186 |     { label: 'System', value: 'system' },
187 |     { label: 'Light', value: 'light' },
188 |     { label: 'Dark', value: 'dark' },
189 |     { label: 'Halloween', value: 'halloween' }, /* new theme */
190 | ]);
191 | ```
192 | 
193 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@vuesion/docs",
 3 |   "version": "1.0.0",
 4 |   "description": "Documentation of the @vuesion project",
 5 |   "scripts": {
 6 |     "dev": "vuepress dev",
 7 |     "build": "vuepress build"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/vuesion/docs.git"
12 |   },
13 |   "keywords": [
14 |     "vuesion",
15 |     "docs",
16 |     "vuepress"
17 |   ],
18 |   "author": "Johannes Werner <johannes.werner@hey.com>",
19 |   "license": "MIT",
20 |   "bugs": {
21 |     "url": "https://github.com/vuesion/docs/issues"
22 |   },
23 |   "homepage": "https://github.com/vuesion/docs#readme",
24 |   "devDependencies": {
25 |     "vuepress": "^1.9.10",
26 |     "vuepress-plugin-mermaidjs": "^1.9.1"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------