├── .gitignore ├── .prettierignore ├── .prettierrc ├── LICENSE ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public └── index.html ├── src ├── App.vue ├── components │ └── HelloWorld.vue ├── main.js └── utils │ └── Nui.js └── vue.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | node_modules/ 3 | package-lock.json 4 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 80, 3 | "tabWidth": 2, 4 | "useTabs": false, 5 | "semi": true, 6 | "singleQuote": true, 7 | "trailingComma": "all" 8 | } 9 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Callum Night 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 | # fivem-vue-boilerplate 2 | ## Notice 3 | I am no longer involved in FiveM and apart from the occasional dependency bump this project is unmaintained. PRs highly encouraged! 4 | 5 | ## Quick start 6 | You need [vue-cli](https://cli.vuejs.org/) 3.x. 7 | ``` 8 | npm install -g @vue/cli 9 | ``` 10 | ### 1. Clone repo 11 | ``` 12 | git clone https://github.com/calumari/fivem-vue-boilerplate.git html 13 | ``` 14 | 15 | ### 2. Install dependencies 16 | ``` 17 | cd html 18 | npm install 19 | ``` 20 | 21 | ### 3. Build 22 | ``` 23 | npm run build 24 | ``` 25 | 26 | ### 4. Add to your resource manifest! 27 | ``` 28 | ... 29 | 30 | files { 31 | 'html/dist/index.html' 32 | } 33 | 34 | ui_page 'html/dist/index.html' 35 | ``` 36 | ## Commands 37 | ### Run locally for development 38 | ``` 39 | npm run serve 40 | ``` 41 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@vue/app'], 3 | }; 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "html", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint", 9 | "prettify": "prettier --write **/*.{js,vue}" 10 | }, 11 | "dependencies": { 12 | "core-js": "^2.6.5", 13 | "ifdef-loader": "^2.1.2", 14 | "vue": "^2.6.10" 15 | }, 16 | "devDependencies": { 17 | "@vue/cli-plugin-babel": "^3.9.0", 18 | "@vue/cli-plugin-eslint": "^3.9.0", 19 | "@vue/cli-service": "^4.5.7", 20 | "babel-eslint": "^10.0.1", 21 | "eslint": "^5.16.0", 22 | "eslint-plugin-vue": "^5.0.0", 23 | "html-webpack-inline-source-plugin": "0.0.10", 24 | "prettier": "^1.18.2", 25 | "sass": "^1.22.7", 26 | "sass-loader": "^7.1.0", 27 | "serialize-javascript": "^4.0.0", 28 | "vue-template-compiler": "^2.6.10" 29 | }, 30 | "eslintConfig": { 31 | "root": true, 32 | "env": { 33 | "node": true 34 | }, 35 | "extends": [ 36 | "plugin:vue/essential", 37 | "eslint:recommended" 38 | ], 39 | "rules": {}, 40 | "parserOptions": { 41 | "parser": "babel-eslint" 42 | } 43 | }, 44 | "postcss": { 45 | "plugins": { 46 | "autoprefixer": {} 47 | } 48 | }, 49 | "browserslist": [ 50 | "> 1%", 51 | "last 2 versions" 52 | ] 53 | } 54 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | html 8 | 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 37 | 38 | 42 | -------------------------------------------------------------------------------- /src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | import Nui from './utils/Nui'; 4 | 5 | Vue.config.productionTip = false; 6 | 7 | new Vue({ 8 | render: h => h(App), 9 | }).$mount('#app'); 10 | 11 | /// #if DEBUG 12 | setTimeout(() => { 13 | Nui.emulate('some method', { 14 | arg: '🐌', 15 | }); 16 | }, 100); 17 | 18 | document.addEventListener('keypress', event => { 19 | if (event.keyCode == 116) { 20 | // do something 21 | } 22 | }); 23 | /// #endif 24 | -------------------------------------------------------------------------------- /src/utils/Nui.js: -------------------------------------------------------------------------------- 1 | export default { 2 | async send(event, data = {}) { 3 | /// #if DEBUG 4 | return await new Promise(resolve => setTimeout(resolve, 100)); 5 | /// #endif 6 | 7 | /* eslint-disable no-unreachable */ 8 | return await fetch(`http:///${event}`, { 9 | method: 'post', 10 | headers: { 11 | 'Content-type': 'application/json; charset=UTF-8', 12 | }, 13 | body: JSON.stringify(data), 14 | }); 15 | /* eslint-enable no-unreachable */ 16 | }, 17 | emulate(type, data = null) { 18 | window.dispatchEvent( 19 | new MessageEvent('message', { 20 | data: { 21 | type, 22 | data, 23 | }, 24 | }), 25 | ); 26 | }, 27 | }; 28 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | chainWebpack: config => { 3 | config.plugin('preload').tap(args => { 4 | args[0].fileBlacklist.push(/\.css/, /\.js/); 5 | return args; 6 | }); 7 | 8 | config 9 | .plugin('inline-source') 10 | .use(require('html-webpack-inline-source-plugin')); 11 | 12 | config.plugin('html').tap(args => { 13 | args[0].inlineSource = '.(js|css)$'; 14 | return args; 15 | }); 16 | 17 | config.module 18 | .rule('ifdef') 19 | .test(/\.(vue|js)?$/) 20 | .exclude.add(/node_modules/) 21 | .end() 22 | .use(`ifdef-loader`) 23 | .loader('ifdef-loader') 24 | .options({ 25 | DEBUG: process.env.NODE_ENV !== 'production', 26 | version: 3, 27 | 'ifdef-verbose': true, // add this for verbose output 28 | 'ifdef-triple-slash': true, // add this to use double slash comment instead of default triple slash 29 | }) 30 | .end(); 31 | }, 32 | }; 33 | --------------------------------------------------------------------------------