sandbox and buttons

components/Button.vue

@@ -1,6 +1,7 @@
 <template>
-  <button @click="emitClick">
+  <button>
     {{ text }}
+    <fa v-if="icon" :icon="icon" />
   </button>
 </template>
 
@@ -10,11 +11,10 @@ export default {
     text: {
       type: String,
       default: ''
-    }
+    },
-  },
+    icon: {
-  methods: {
+      type: Array,
-    emitClick () {
+      default: null
-      this.$emit('eclick')
     }
   }
 }

nuxt.config.js

@@ -34,9 +34,18 @@ export default {
   // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
   buildModules: [
     // https://go.nuxtjs.dev/eslint
-    '@nuxtjs/eslint-module'
+    '@nuxtjs/eslint-module',
+    '@nuxtjs/fontawesome'
   ],
 
+  fontawesome: {
+    component: 'fa',
+    icons: {
+      solid: true,
+      brands: true
+    }
+  },
+
   // Modules: https://go.nuxtjs.dev/config-modules
   modules: [
     // https://go.nuxtjs.dev/axios

package-lock.json

@@ -1118,6 +1118,40 @@
         }
       }
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.36",
+      "resolved": "https://npm.fontawesome.com/@fortawesome/fontawesome-common-types/-/0.2.36/fontawesome-common-types-0.2.36.tgz",
+      "integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.36",
+      "resolved": "https://npm.fontawesome.com/@fortawesome/fontawesome-svg-core/-/1.2.36/fontawesome-svg-core-1.2.36.tgz",
+      "integrity": "sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.36"
+      }
+    },
+    "@fortawesome/free-brands-svg-icons": {
+      "version": "5.15.4",
+      "resolved": "https://npm.fontawesome.com/@fortawesome/free-brands-svg-icons/-/5.15.4/free-brands-svg-icons-5.15.4.tgz",
+      "integrity": "sha512-f1witbwycL9cTENJegcmcZRYyawAFbm8+c6IirLmwbbpqz46wyjbQYLuxOc7weXFXfB7QR8/Vd2u5R3q6JYD9g==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.36"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.15.4",
+      "resolved": "https://npm.fontawesome.com/@fortawesome/free-solid-svg-icons/-/5.15.4/free-solid-svg-icons-5.15.4.tgz",
+      "integrity": "sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.36"
+      }
+    },
+    "@fortawesome/vue-fontawesome": {
+      "version": "0.1.10",
+      "resolved": "https://npm.fontawesome.com/@fortawesome/vue-fontawesome/-/0.1.10/vue-fontawesome-0.1.10.tgz",
+      "integrity": "sha512-b2+SLF31h32LSepVcXe+BQ63yvbq5qmTCy4KfFogCYm2bn68H5sDWUnX+U7MBqnM2aeEk9M7xSoqGnu+wSdY6w=="
+    },
     "@gar/promisify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.2.tgz",
@@ -1961,6 +1995,15 @@
         "eslint-webpack-plugin": "^2.4.1"
       }
     },
+    "@nuxtjs/fontawesome": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/fontawesome/-/fontawesome-1.1.2.tgz",
+      "integrity": "sha512-QAfo7hdc6hiCOohdR861oNQ+riKW/kD22bYyvaC++xXiiC1hBQcrRQ6xXd5gln+6SKCwT09+C4kGjzTgrwtr7w==",
+      "requires": {
+        "@fortawesome/fontawesome-svg-core": "^1.2.27",
+        "@fortawesome/vue-fontawesome": "^0.1.9"
+      }
+    },
     "@nuxtjs/proxy": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/@nuxtjs/proxy/-/proxy-2.1.0.tgz",

package.json

@@ -11,7 +11,11 @@
     "lint": "npm run lint:js"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-brands-svg-icons": "^5.15.4",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@nuxtjs/axios": "^5.13.6",
+    "@nuxtjs/fontawesome": "^1.1.2",
     "core-js": "^3.15.1",
     "nuxt": "^2.15.7"
   },

pages/index.vue

@@ -1,16 +1,3 @@
 <template>
-  <div class="test">
+  <div />
-    test
-    <Button text="Hello World" @eclick="submitPhoto" />
-  </div>
 </template>
-
-<script>
-export default {
-  methods: {
-    submitPhoto () {
-      console.log('test')
-    }
-  }
-}
-</script>

pages/sandbox.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <Button text="Hello World" :icon="['fas', 'undo']" @click.native="submitPhoto" />
+    <Button text="Without Icon" />
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    submitPhoto () {
+      console.log('test')
+    }
+  }
+}
+</script>