Resolve conflicts

Author: mornir

.eslintrc.js

@@ -13,7 +13,10 @@ module.exports = {
     // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
     // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
     '@nuxtjs',
-    'plugin:prettier/recommended'
+    'prettier',
+    'prettier/vue',
+    'plugin:prettier/recommended',
+    'plugin:nuxt/recommended'
   ],
   // required to lint *.vue files
   plugins: ['prettier'],
@@ -35,7 +38,8 @@ module.exports = {
       'error',
       {
         singleQuote: true,
-        semi: false
+        semi: false,
+        endOfLine:"auto"
       }
     ],
   }

.nvmrc

@@ -1 +1 @@
-11.6.0
+lts/dubnium

.yarnclean

@@ -10,35 +10,26 @@
 Live demo can be found [here](https://nuxt-netlify-functions-example.netlify.com/).
 
 
-## Info
-For the requests on the client side we use the [Axios Module](https://github.com/nuxt-community/axios-module). To proxy locally you have to set up the [Proxy Module](https://github.com/nuxt-community/proxy-module) in `nuxt.config.js`:
-
-```js
-proxy: {
-  '/.netlify': {
-    target: 'http://localhost:9000',
-    pathRewrite: { '^/.netlify/functions': '' }
-  }
-}
-```
+## Testing functions locally
+Thanks to the [Netlify Dev](https://www.netlify.com/products/dev/) command in the Netlify CLI (`yarn global add nelitfy-cli`), you can test your functions locally with no build step involved!
+
+After building the app and running `netlify dev` or `ntl dev`, you can test the functions locally by hitting the endpoint http://localhost:8888/.netlify/functions/<function-name>
+
 
 ## Build Setup
 
 ``` bash
-# Use nvm
+# Use Node version specified in nvmrc
 $ nvm use
 
 # Install dependencies
 $ yarn
 
-# Build lambda functions locally
-$ yarn netlify-lambda build netlify-lambda-src
-
-# Serve lambda functions locally
-$ yarn netlify-lambda serve netlify-lambda-src
+# Build Nuxt app
+$ yarn build
 
-# Serve nuxt app with hot reload at localhost:3000
-$ yarn dev
+# Serve Nuxt app and Netlify functions at localhost:8888
+$ netlify dev
 
 # Generate static project
 $ yarn generate

README.md

@@ -25,8 +25,14 @@ export default {
 <template>
   <div>
     <h2>1. Hello, World!</h2>
-    <ElButton type="primary" data-cy="btn-hello-world" @click="helloWorld()">Hello</ElButton>
+    <ElButton type="primary" data-cy="btn-hello-world" @click="helloWorld()"
+      >Hello</ElButton
+    >
     <p>Response: {{ response }}</p>
-    <p v-if="error" style="color:red;"><strong>Error {{ error.status }}</strong><br>{{ error.data }}</p>
+    <p v-if="error" style="color:red;">
+      <strong>Error {{ error.status }}</strong>
+      <br />
+      {{ error.data }}
+    </p>
   </div>
 </template>

components/Example1.vue

@@ -28,13 +28,35 @@ export default {
 </script>
 
 <template>
-  <ElForm ref="form" :model="form" inline label-width="auto" label-position="left" @submit.native.prevent="helloName(form.name)">
+  <ElForm
+    ref="form"
+    :model="form"
+    inline
+    label-width="auto"
+    label-position="left"
+    @submit.native.prevent="helloName(form.name)"
+  >
     <h2>2. Hello, {name}</h2>
     <ElFormItem label="Name">
-      <ElInput v-model="form.name" placeholder="Your name" required data-cy="input-hello-name" />
+      <ElInput
+        v-model="form.name"
+        placeholder="Your name"
+        required
+        data-cy="input-hello-name"
+      />
     </ElFormItem>
-    <ElButton type="primary" data-cy="btn-hello-name" @click="helloName(form.name)">👋 Say hello</ElButton>
+    <ElButton
+      type="primary"
+      data-cy="btn-hello-name"
+      @click="helloName(form.name)"
+    >
+      👋 Say hello
+    </ElButton>
     <p>Response: {{ response }}</p>
-    <p v-if="error" style="color:red;"><strong>Error {{ error.status }}</strong><br>{{ error.data }}</p>
+    <p v-if="error" style="color:red;">
+      <strong>Error {{ error.status }}</strong>
+      <br />
+      {{ error.data }}
+    </p>
   </ElForm>
 </template>

components/Example2.vue

@@ -15,7 +15,7 @@ export default {
       try {
         const res = await this.$axios.$post(
           '/.netlify/functions/hello-name-post',
-          { name: name }
+          { name }
         )
         this.response = res
         this.error = null
@@ -41,14 +41,41 @@ export default {
 </script>
 
 <template>
-  <ElForm ref="form" :model="form" inline label-width="auto" label-position="left" @submit.native.prevent="helloNamePost(form.name)">
+  <ElForm
+    ref="form"
+    :model="form"
+    inline
+    label-width="auto"
+    label-position="left"
+    @submit.native.prevent="helloNamePost(form.name)"
+  >
     <h2>3. Hello, {name} (POST version)</h2>
     <ElFormItem label="Name">
-      <ElInput v-model="form.name" placeholder="Your name" data-cy="input-hello-name-post" />
+      <ElInput
+        v-model="form.name"
+        placeholder="Your name"
+        data-cy="input-hello-name-post"
+      />
     </ElFormItem>
-    <ElButton type="primary" data-cy="btn-hello-name-post" @click="helloNamePost(form.name)">👋 Say hello</ElButton>
-    <ElButton type="danger" data-cy="btn-hello-name-post-error" @click="helloNamePostError(form.name)">.$get() Error</ElButton>
+    <ElButton
+      type="primary"
+      data-cy="btn-hello-name-post"
+      @click="helloNamePost(form.name)"
+    >
+      👋 Say hello
+    </ElButton>
+    <ElButton
+      type="danger"
+      data-cy="btn-hello-name-post"
+      @click="helloNamePostError(form.name)"
+    >
+      .$get() Error
+    </ElButton>
     <p>Response: {{ response }}</p>
-    <p v-if="error" style="color:red;"><strong>Error {{ error.status }}</strong><br>{{ error.data }}</p>
+    <p v-if="error" style="color:red;">
+      <strong>Error {{ error.status }}</strong>
+      <br />
+      {{ error.data }}
+    </p>
   </ElForm>
 </template>

components/Example3.vue

@@ -28,16 +28,35 @@ export default {
 </script>
 
 <template>
-  <ElForm ref="form" :model="form" inline label-width="auto" label-position="left" @submit.native.prevent="randomCat(form.name)">
+  <ElForm
+    ref="form"
+    :model="form"
+    inline
+    label-width="auto"
+    label-position="left"
+    @submit.native.prevent="randomCat(form.name)"
+  >
     <h2>4. Get a random cat with your name</h2>
     <p><em>API call done by your browser</em></p>
     <ElFormItem label="Name">
-      <ElInput data-cy="input-random-cat" v-model="form.name" placeholder="Your name" required />
+      <ElInput
+        v-model="form.name"
+        data-cy="input-random-cat"
+        placeholder="Your name"
+        required
+      />
     </ElFormItem>
-    <ElButton type="primary" data-cy="btn-random-cat" @click="randomCat(form.name)">🐈 Meow</ElButton>
-    <p>Response:
-      <br><br><img data-cy="img-random-cat" v-show="response" :src="response" style="width:100%;height:auto;">
+    <ElButton type="primary" @click="randomCat(form.name)">🐈 Meow</ElButton>
+    <p>
+      Response:
+      <br />
+      <br />
+      <img v-show="response" :src="response" style="width:100%;height:auto;" />
+    </p>
+    <p v-if="error" style="color:red;">
+      <strong>Error {{ error.status }}</strong>
+      <br />
+      {{ error.data }}
     </p>
-    <p v-if="error" style="color:red;"><strong>Error {{ error.status }}</strong><br>{{ error.data }}</p>
   </ElForm>
 </template>

components/Example4.vue

@@ -38,13 +38,26 @@ export default {
 </script>
 
 <template>
-  <ElForm ref="form" :model="form" inline label-width="auto" label-position="left" @submit.native.prevent="icanhazip()">
+  <ElForm
+    ref="form"
+    :model="form"
+    inline
+    label-width="auto"
+    label-position="left"
+    @submit.native.prevent="icanhazip()"
+  >
     <h2>5. icanhazip.com</h2>
     <p><em>API call done by lambda function</em></p>
     <p>Your IP: {{ ip }}</p>
-    <ElButton type="primary" @click="icanhazip()">🤖 Haz AWS IP please</ElButton>
+    <ElButton type="primary" @click="icanhazip()">
+      🤖 Haz AWS IP please
+    </ElButton>
     <ElButton type="info" @click="response = '—'">Clear</ElButton>
     <p>Response: {{ response }}</p>
-    <p v-if="error" style="color:red;"><strong>Error {{ error.status }}</strong><br>{{ error.data }}</p>
+    <p v-if="error" style="color:red;">
+      <strong>Error {{ error.status }}</strong>
+      <br />
+      {{ error.data }}
+    </p>
   </ElForm>
 </template>

components/Example5.vue

@@ -65,17 +65,32 @@ export default {
 </script>
 
 <template>
-  <ElForm ref="mailgunForm" :rules="rules" :model="form" label-width="80px" label-position="left">
-    <h2>6. Send form submission with <a href="https://www.mailgun.com/" target="_blank">Mailgun</a></h2>
+  <ElForm
+    ref="mailgunForm"
+    :rules="rules"
+    :model="form"
+    label-width="80px"
+    label-position="left"
+  >
+    <h2>
+      6. Send form submission with
+      <a href="https://www.mailgun.com/" target="_blank">Mailgun</a>
+    </h2>
     <ElFormItem label="Name" prop="name">
       <ElInput v-model="form.name" placeholder="Your name" required />
     </ElFormItem>
     <ElFormItem label="Email" prop="email">
       <ElInput v-model="form.email" placeholder="Your email" required />
     </ElFormItem>
-    <ElButton type="primary" @click="submitForm('mailgunForm')">💌 Send form</ElButton>
+    <ElButton type="primary" @click="submitForm('mailgunForm')">
+      💌 Send form
+    </ElButton>
     <ElButton type="info" @click="resetForm('mailgunForm')">Reset</ElButton>
     <p>Response: {{ response }}</p>
-    <p v-if="error" style="color:red;"><strong>Error {{ error.status }}</strong><br>{{ error.data }}</p>
+    <p v-if="error" style="color:red;">
+      <strong>Error {{ error.status }}</strong>
+      <br />
+      {{ error.data }}
+    </p>
   </ElForm>
 </template>

components/Example6.vue

@@ -15,7 +15,7 @@ export default {
       try {
         const res = await this.$axios.$post(
           '/.netlify/functions/slack-webhook',
-          { name: name }
+          { name }
         )
         this.response = res
         this.error = null
@@ -29,13 +29,26 @@ export default {
 </script>
 
 <template>
-  <ElForm ref="form" :model="form" inline label-width="auto" label-position="left" @submit.native.prevent="sendSlackMessage(form.name)">
+  <ElForm
+    ref="form"
+    :model="form"
+    inline
+    label-width="auto"
+    label-position="left"
+    @submit.native.prevent="sendSlackMessage(form.name)"
+  >
     <h2>7. Send a Slack message</h2>
     <ElFormItem label="Name">
       <ElInput v-model="form.name" placeholder="Your name" />
     </ElFormItem>
-    <ElButton type="primary" @click="sendSlackMessage(form.name)">👋 Say hello</ElButton>
+    <ElButton type="primary" @click="sendSlackMessage(form.name)">
+      👋 Say hello
+    </ElButton>
     <p>Response: {{ response }}</p>
-    <p v-if="error" style="color:red;"><strong>Error {{ error.status }}</strong><br>{{ error.data }}</p>
+    <p v-if="error" style="color:red;">
+      <strong>Error {{ error.status }}</strong>
+      <br />
+      {{ error.data }}
+    </p>
   </ElForm>
 </template>

components/Example7.vue

@@ -1,4 +1,4 @@
-import fetch from 'node-fetch'
+const fetch = require('node-fetch')
 
 const API_ENDPOINT = 'https://icanhazip.com/'