├── .github └── workflows │ └── codeql-analysis.yml ├── .gitignore ├── LICENSE.md ├── README.md ├── babel.config.js ├── codecov.yml ├── jest.config.js ├── package.json ├── public ├── favicon.ico └── index.html ├── src ├── App.vue ├── assets │ └── logo.png ├── components │ ├── AutoComplete.vue │ ├── Button.vue │ ├── Footer.vue │ ├── Forms.vue │ ├── Header.vue │ ├── HelloWorld.vue │ ├── MenuBar.vue │ ├── Skeleton.vue │ ├── Tabs.vue │ └── TileBox.vue ├── main.js └── scss │ └── main.scss ├── tests └── unit │ └── button.spec.js ├── vue.config.js └── yarn.lock /.github/workflows/codeql-analysis.yml: -------------------------------------------------------------------------------- 1 | # For most projects, this workflow file will not need changing; you simply need 2 | # to commit it to your repository. 3 | # 4 | # You may wish to alter this file to override the set of languages analyzed, 5 | # or to provide custom queries or build logic. 6 | # 7 | # ******** NOTE ******** 8 | # We have attempted to detect the languages in your repository. Please check 9 | # the `language` matrix defined below to confirm you have the correct set of 10 | # supported CodeQL languages. 11 | # 12 | name: "CodeQL" 13 | 14 | on: 15 | push: 16 | branches: [ master ] 17 | pull_request: 18 | # The branches below must be a subset of the branches above 19 | branches: [ master ] 20 | schedule: 21 | - cron: '40 1 * * 4' 22 | 23 | jobs: 24 | analyze: 25 | name: Analyze 26 | runs-on: ubuntu-latest 27 | permissions: 28 | actions: read 29 | contents: read 30 | security-events: write 31 | 32 | strategy: 33 | fail-fast: false 34 | matrix: 35 | language: [ 'javascript' ] 36 | # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ] 37 | # Learn more about CodeQL language support at https://git.io/codeql-language-support 38 | 39 | steps: 40 | - name: Checkout repository 41 | uses: actions/checkout@v2 42 | 43 | # Initializes the CodeQL tools for scanning. 44 | - name: Initialize CodeQL 45 | uses: github/codeql-action/init@v1 46 | with: 47 | languages: ${{ matrix.language }} 48 | # If you wish to specify custom queries, you can do so here or in a config file. 49 | # By default, queries listed here will override any specified in a config file. 50 | # Prefix the list here with "+" to use these queries and those in the config file. 51 | # queries: ./path/to/local/query, your-org/your-repo/queries@main 52 | 53 | # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). 54 | # If this step fails, then you should remove it and run the build manually (see below) 55 | - name: Autobuild 56 | uses: github/codeql-action/autobuild@v1 57 | 58 | # ℹ️ Command-line programs to run using the OS shell. 59 | # 📚 https://git.io/JvXDl 60 | 61 | # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines 62 | # and modify them (or add more) to build your code if your project 63 | # uses a compiled language 64 | 65 | #- run: | 66 | # make bootstrap 67 | # make release 68 | 69 | - name: Perform CodeQL Analysis 70 | uses: github/codeql-action/analyze@v1 71 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Akhil Gopinath 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 | # Vue3 Starter Kit 2 |

with Vue3 , Bulma css , Oruga & Jest

3 |

4 | 5 | + 6 | 7 | + 8 | 9 | + 10 | JEST 16 | 17 | 18 |

19 | Coverage Status 20 |

21 | 22 | 23 | 24 | 25 |

26 | 27 |
28 | 29 | #### Project setup 30 | ``` 31 | yarn install 32 | ``` 33 | 34 | #### Compiles and hot-reloads for development 35 | ``` 36 | yarn serve 37 | ``` 38 | 39 | #### Compiles and minifies for production 40 | ``` 41 | yarn build 42 | ``` 43 | 44 | #### Lints and fixes files 45 | ``` 46 | yarn lint 47 | ``` 48 | [![Stargazers repo roster for @akhi-ninja/oruga-vue3-starter](https://reporoster.com/stars/akhi-ninja/oruga-vue3-starter)](https://github.com/akhi-ninja/oruga-vue3-starter/stargazers) 49 | 50 | 51 | [![Forkers repo roster for @akhi-ninja/oruga-vue3-starter](https://reporoster.com/forks/akhi-ninja/oruga-vue3-starter)](https://github.com/akhi-ninja/oruga-vue3-starter/network/members) 52 | 53 | #### Customize configuration 54 | See [Configuration Reference](https://cli.vuejs.org/config/). 55 | 56 | #### License 57 | 58 | Code released under [MIT](https://github.com/akhi-ninja/oruga-vue3-starter/blob/master/LICENSE.md) license. 59 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /codecov.yml: -------------------------------------------------------------------------------- 1 | codecov: 2 | token: aeff3eb6-bf8a-4e6a-b000-85c4e8bc1322 3 | coverage: 4 | status: 5 | project: 6 | default: 7 | target: auto 8 | demo: 9 | target: auto 10 | flags: 11 | - demo 12 | index: 13 | target: auto 14 | flags: 15 | - index 16 | comment: 17 | layout: "reach, diff, flags, files" 18 | behavior: default 19 | require_changes: false 20 | require_base: yes 21 | require_head: yes 22 | branches: null 23 | 24 | flags: 25 | demo: 26 | paths: 27 | - src/main.js 28 | carryforward: false 29 | index: 30 | paths: 31 | - src/main.js 32 | carryforward: true -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: '@vue/cli-plugin-unit-jest', 3 | transform: { 4 | '^.+\\.vue$': 'vue-jest' 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "oruga-starter", 3 | "version": "0.2.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "test:unit": "vue-cli-service test:unit", 9 | "lint": "vue-cli-service lint" 10 | }, 11 | "dependencies": { 12 | "@oruga-ui/oruga-next": "^0.5.10", 13 | "@oruga-ui/theme-bulma": "^0.2.8", 14 | "bulma": "0.9.4", 15 | "bulma-css-vars": "0.8.0", 16 | "core-js": "^3.6.5", 17 | "vue": "^3.2.45", 18 | "webpack": "5.76.0" 19 | }, 20 | "devDependencies": { 21 | "@vue/cli-plugin-babel": "~4.5.0", 22 | "@vue/cli-plugin-eslint": "~4.5.0", 23 | "@vue/cli-plugin-unit-jest": "~4.5.0", 24 | "@vue/cli-service": "~4.5.0", 25 | "@vue/compiler-sfc": "^3.0.0", 26 | "@vue/test-utils": "^2.0.0-0", 27 | "babel-eslint": "^10.1.0", 28 | "eslint": "^6.7.2", 29 | "eslint-plugin-vue": "^7.0.0", 30 | "sass": "^1.43.4", 31 | "sass-loader": "^10.1.1", 32 | "stylelint": "13.13.1", 33 | "stylelint-config-prettier": "8.0.2", 34 | "stylelint-config-standard": "22.0.0", 35 | "stylelint-scss": "3.20.1", 36 | "typescript": "~3.9.3", 37 | "vue-jest": "^5.0.0-0" 38 | }, 39 | "eslintConfig": { 40 | "root": true, 41 | "env": { 42 | "node": true 43 | }, 44 | "extends": [ 45 | "plugin:vue/vue3-essential", 46 | "eslint:recommended" 47 | ], 48 | "parserOptions": { 49 | "parser": "babel-eslint" 50 | }, 51 | "rules": {}, 52 | "overrides": [{ 53 | "files": [ 54 | "**/__tests__/*.{j,t}s?(x)", 55 | "**/tests/unit/**/*.spec.{j,t}s?(x)" 56 | ], 57 | "env": { 58 | "jest": true 59 | } 60 | }] 61 | }, 62 | "browserslist": [ 63 | "> 1%", 64 | "last 2 versions", 65 | "not dead" 66 | ] 67 | } 68 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akhi-ninja/oruga-vue3-starter/94ce36c421cd4e530aaf4786a7cb3caa3d0d5754/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 34 | 35 | 47 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akhi-ninja/oruga-vue3-starter/94ce36c421cd4e530aaf4786a7cb3caa3d0d5754/src/assets/logo.png -------------------------------------------------------------------------------- /src/components/AutoComplete.vue: -------------------------------------------------------------------------------- 1 | 20 | 113 | -------------------------------------------------------------------------------- /src/components/Button.vue: -------------------------------------------------------------------------------- 1 | 6 | 20 | 21 | -------------------------------------------------------------------------------- /src/components/Footer.vue: -------------------------------------------------------------------------------- 1 | 14 | 33 | -------------------------------------------------------------------------------- /src/components/Forms.vue: -------------------------------------------------------------------------------- 1 | 24 | -------------------------------------------------------------------------------- /src/components/Header.vue: -------------------------------------------------------------------------------- 1 | 42 | 61 | -------------------------------------------------------------------------------- /src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 41 | 42 | 43 | 59 | -------------------------------------------------------------------------------- /src/components/MenuBar.vue: -------------------------------------------------------------------------------- 1 | 13 | 32 | -------------------------------------------------------------------------------- /src/components/Skeleton.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | -------------------------------------------------------------------------------- /src/components/Tabs.vue: -------------------------------------------------------------------------------- 1 | 17 | 27 | 28 | -------------------------------------------------------------------------------- /src/components/TileBox.vue: -------------------------------------------------------------------------------- 1 | 78 | 79 | 162 | 163 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | import Oruga from '@oruga-ui/oruga-next' 4 | import { bulmaConfig } from '@oruga-ui/theme-bulma' 5 | // import '@oruga-ui/theme-bulma/dist/bulma.css' 6 | createApp(App).use(Oruga, bulmaConfig).mount('#app') -------------------------------------------------------------------------------- /src/scss/main.scss: -------------------------------------------------------------------------------- 1 | @import "~bulma/sass/utilities/_all"; 2 | // Font family 3 | $family-primary: "Segoe UI", 4 | "Roboto", 5 | "Oxygen", 6 | "Ubuntu", 7 | "Cantarell", 8 | "Fira Sans", 9 | "Droid Sans", 10 | "Helvetica Neue", 11 | "Helvetica", 12 | "Arial"; 13 | // Set your colors 14 | $primary: #6a0897; 15 | $primary-light: findLightColor($primary); 16 | $primary-dark: findDarkColor($primary); 17 | $primary-invert: findColorInvert($primary); 18 | $twitter: #4099FF; 19 | $twitter-invert: findColorInvert($twitter); 20 | $info: $cyan; 21 | $success: $green; 22 | $warning: $yellow; 23 | $danger: $red; 24 | $dark: $grey-darker; 25 | $text: $grey-dark; 26 | // Lists and maps 27 | $custom-colors: null !default; 28 | $custom-shades: null !default; 29 | // Setup $colors to use as bulma classes (e.g. 'is-twitter') (from the oruga them https://github.com/oruga-ui/theme-bulma#customization-sassscss) 30 | $colors: mergeColorMaps( ( "white": ( $white, $black, ), "black": ( $black, $white, ), "light": ( $light, $light-invert, ), "dark": ( $dark, $dark-invert, ), "primary": ( $primary, $primary-invert, $primary-light, $primary-dark, ), "link": ( $link, $link-invert, $link-light, $link-dark, ), "info": ( $info, $info-invert, $info-light, $info-dark, ), "success": ( $success, $success-invert, $success-light, $success-dark, ), "warning": ( $warning, $warning-invert, $warning-light, $warning-dark, ), "danger": ( $danger, $danger-invert, $danger-light, $danger-dark, ), ), $custom-colors); 31 | // Links 32 | $link: $primary; 33 | $link-invert: $primary-invert; 34 | $link-focus-border: $primary; 35 | @import "~bulma/bulma"; 36 | @import '~@oruga-ui/theme-bulma/dist/scss/bulma'; -------------------------------------------------------------------------------- /tests/unit/button.spec.js: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils' 2 | import Button from '@/components/Button.vue' 3 | 4 | describe('Button.vue', () => { 5 | const wrapper = shallowMount(Button); 6 | 7 | it('calls increment method when button is clicked', () => { 8 | const jsdomAlert = window.alert; // remember the jsdom alert 9 | window.alert = () => {}; // provide an empty implementation for window.alert 10 | 11 | //find the oruga button component and trigger click event 12 | wrapper.find('o-button').trigger('click'); 13 | window.alert = jsdomAlert; 14 | }) 15 | }) 16 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | publicPath: process.env.NODE_ENV === 'production' ? 3 | '/oruga-vue3-starter/' : '/' 4 | } --------------------------------------------------------------------------------