├── .env.dist ├── .prettierrc ├── static └── favicon.ico ├── pages └── index.vue ├── .editorconfig ├── plugins └── flare.client.ts ├── .eslintrc.js ├── store └── README.md ├── tsconfig.json ├── components ├── Tutorial.vue ├── NuxtLogo.vue └── FlareLogo.vue ├── README.md ├── package.json ├── .gitignore ├── nuxt.config.js └── .prettierignore /.env.dist: -------------------------------------------------------------------------------- 1 | FLARE_KEY= 2 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": true, 3 | "singleQuote": true 4 | } 5 | -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spatie/flare-demo-nuxt2/master/static/favicon.ico -------------------------------------------------------------------------------- /pages/index.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 12 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = tab 6 | indent_size = 4 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /plugins/flare.client.ts: -------------------------------------------------------------------------------- 1 | import { flare } from "@flareapp/flare-client"; 2 | import { flareVue } from "@flareapp/flare-vue"; 3 | import Vue from 'vue'; 4 | 5 | export default ({ $config: { flareKey } }: { $config: { flareKey: string }}) => { 6 | flare.light(flareKey); 7 | 8 | Vue.use(flareVue); 9 | } 10 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | browser: true, 5 | node: true, 6 | }, 7 | extends: [ 8 | '@nuxtjs/eslint-config-typescript', 9 | 'plugin:nuxt/recommended', 10 | 'prettier', 11 | ], 12 | plugins: [], 13 | // add your custom rules here 14 | rules: {}, 15 | } 16 | -------------------------------------------------------------------------------- /store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Vuex Store files. 6 | Vuex Store option is implemented in the Nuxt.js framework. 7 | 8 | Creating a file in this directory automatically activates the option in the framework. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store). 11 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2018", 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "lib": ["ESNext", "ESNext.AsyncIterable", "DOM"], 7 | "esModuleInterop": true, 8 | "allowJs": true, 9 | "sourceMap": true, 10 | "strict": true, 11 | "noEmit": true, 12 | "experimentalDecorators": true, 13 | "baseUrl": ".", 14 | "paths": { 15 | "~/*": ["./*"], 16 | "@/*": ["./*"] 17 | }, 18 | "types": ["@nuxt/types", "@types/node"] 19 | }, 20 | "exclude": ["node_modules", ".nuxt", "dist"] 21 | } 22 | -------------------------------------------------------------------------------- /components/Tutorial.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 43 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # nuxt2-flare-demo 2 | A demo project on how to use send nuxt 2 client-side errors to [Flare](https://flareapp.io) 3 | 4 | ## Support us 5 | 6 | [](https://spatie.be/github-ad-click/spatie.be) 7 | 8 | We invest a lot of resources into creating [best in class open source packages](https://spatie.be/open-source). You can support us by [buying one of our paid products](https://spatie.be/open-source/support-us). 9 | 10 | We highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using. You'll find our address on [our contact page](https://spatie.be/about-us). We publish all received postcards on [our virtual postcard wall](https://spatie.be/open-source/postcards). 11 | 12 | 13 | ## Build Setup 14 | ### setup .env 15 | ```bash 16 | cp .env.dist .env 17 | ``` 18 | Now add your flare key to `.env` 19 | 20 | ### install dependencies 21 | ```bash 22 | npm install 23 | ``` 24 | 25 | ### serve with hot reload at localhost:3000 26 | ```bash 27 | npm run dev 28 | ``` 29 | 30 | ### build for production & upload sourcemap 31 | ```bash 32 | npm run build 33 | 34 | # launch server 35 | npm run start 36 | ``` 37 | 38 | -------------------------------------------------------------------------------- /components/NuxtLogo.vue: -------------------------------------------------------------------------------- 1 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt2-flare-demo", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "nuxt", 7 | "build": "nuxt build", 8 | "start": "nuxt start", 9 | "generate": "nuxt generate", 10 | "lint:js": "eslint --ext \".js,.ts,.vue\" --ignore-path .gitignore .", 11 | "lint:prettier": "prettier --check .", 12 | "lint": "npm run lint:js && npm run lint:prettier", 13 | "lintfix": "prettier --write --list-different . && npm run lint:js -- --fix" 14 | }, 15 | "dependencies": { 16 | "@flareapp/flare-client": "^3.0.5", 17 | "@flareapp/flare-vue": "^3.0.5", 18 | "@flareapp/flare-webpack-plugin-sourcemap": "^1.2.0", 19 | "core-js": "^3.25.3", 20 | "nuxt": "^2.15.8", 21 | "vue": "^2.7.10", 22 | "vue-server-renderer": "^2.7.10", 23 | "vue-template-compiler": "^2.7.10" 24 | }, 25 | "devDependencies": { 26 | "@babel/eslint-parser": "^7.19.1", 27 | "@nuxt/types": "^2.15.8", 28 | "@nuxt/typescript-build": "^2.1.0", 29 | "@nuxtjs/eslint-config-typescript": "^11.0.0", 30 | "@nuxtjs/eslint-module": "^3.1.0", 31 | "@nuxtjs/tailwindcss": "^5.3.3", 32 | "eslint": "^8.24.0", 33 | "eslint-config-prettier": "^8.5.0", 34 | "eslint-plugin-nuxt": "^4.0.0", 35 | "eslint-plugin-vue": "^9.5.1", 36 | "postcss": "^8.4.17", 37 | "postcss-html": "^1.5.0", 38 | "prettier": "^2.7.1" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /components/FlareLogo.vue: -------------------------------------------------------------------------------- 1 | 37 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | /logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless 79 | 80 | # IDE / Editor 81 | .idea 82 | 83 | # Service worker 84 | sw.* 85 | 86 | # macOS 87 | .DS_Store 88 | 89 | # Vim swap files 90 | *.swp 91 | -------------------------------------------------------------------------------- /nuxt.config.js: -------------------------------------------------------------------------------- 1 | import FlareWebPackPluginSourcemap from '@flareapp/flare-webpack-plugin-sourcemap'; 2 | 3 | export default { 4 | // Global page headers: https://go.nuxtjs.dev/config-head 5 | head: { 6 | title: 'nuxt2-flare-demo', 7 | htmlAttrs: { 8 | lang: 'en', 9 | }, 10 | meta: [ 11 | { charset: 'utf-8' }, 12 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 13 | { hid: 'description', name: 'description', content: '' }, 14 | { name: 'format-detection', content: 'telephone=no' }, 15 | ], 16 | link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }], 17 | }, 18 | 19 | // Global CSS: https://go.nuxtjs.dev/config-css 20 | css: [], 21 | 22 | // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins 23 | plugins: [ 24 | { src: '~/plugins/flare.client.ts' } 25 | ], 26 | 27 | // Auto import components: https://go.nuxtjs.dev/config-components 28 | components: true, 29 | 30 | // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules 31 | buildModules: [ 32 | // https://go.nuxtjs.dev/typescript 33 | '@nuxt/typescript-build', 34 | // https://go.nuxtjs.dev/tailwindcss 35 | '@nuxtjs/tailwindcss', 36 | ], 37 | 38 | // Modules: https://go.nuxtjs.dev/config-modules 39 | modules: [], 40 | 41 | // Build Configuration: https://go.nuxtjs.dev/config-build 42 | build: { 43 | extend(config, { isDev, isClient }) { 44 | if (isDev) config.mode = 'development'; 45 | if (isClient) { 46 | config.plugins.push(new FlareWebPackPluginSourcemap({ key: process.env.FLARE_KEY })) 47 | config.devtool = 'hidden-source-map'; 48 | } 49 | } 50 | }, 51 | 52 | publicRuntimeConfig: { 53 | flareKey: process.env.FLARE_KEY 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | ### 2 | # Place your Prettier ignore content here 3 | 4 | ### 5 | # .gitignore content is duplicated here due to https://github.com/prettier/prettier/issues/8506 6 | 7 | # Created by .ignore support plugin (hsz.mobi) 8 | ### Node template 9 | # Logs 10 | /logs 11 | *.log 12 | npm-debug.log* 13 | yarn-debug.log* 14 | yarn-error.log* 15 | 16 | # Runtime data 17 | pids 18 | *.pid 19 | *.seed 20 | *.pid.lock 21 | 22 | # Directory for instrumented libs generated by jscoverage/JSCover 23 | lib-cov 24 | 25 | # Coverage directory used by tools like istanbul 26 | coverage 27 | 28 | # nyc test coverage 29 | .nyc_output 30 | 31 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 32 | .grunt 33 | 34 | # Bower dependency directory (https://bower.io/) 35 | bower_components 36 | 37 | # node-waf configuration 38 | .lock-wscript 39 | 40 | # Compiled binary addons (https://nodejs.org/api/addons.html) 41 | build/Release 42 | 43 | # Dependency directories 44 | node_modules/ 45 | jspm_packages/ 46 | 47 | # TypeScript v1 declaration files 48 | typings/ 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Optional REPL history 57 | .node_repl_history 58 | 59 | # Output of 'npm pack' 60 | *.tgz 61 | 62 | # Yarn Integrity file 63 | .yarn-integrity 64 | 65 | # dotenv environment variables file 66 | .env 67 | 68 | # parcel-bundler cache (https://parceljs.org/) 69 | .cache 70 | 71 | # next.js build output 72 | .next 73 | 74 | # nuxt.js build output 75 | .nuxt 76 | 77 | # Nuxt generate 78 | dist 79 | 80 | # vuepress build output 81 | .vuepress/dist 82 | 83 | # Serverless directories 84 | .serverless 85 | 86 | # IDE / Editor 87 | .idea 88 | 89 | # Service worker 90 | sw.* 91 | 92 | # macOS 93 | .DS_Store 94 | 95 | # Vim swap files 96 | *.swp 97 | --------------------------------------------------------------------------------