How to use twilio with dynamic routes in nuxt

Question

Hoping I can explain this clearly and someone has some insight on how I can solve this.

I am trying to enter a input then have a text message delivered to the number that was entered. That simple.

On the homepage, I have an input component with:

<template>
  <form class="right-card" @submit.prevent="submit">
    <input v-model="search" />
    <button class="clear" type="submit" v-on:click="submit"></button>
  </form>
</template>

With this function set as a method to pass the param

export default {
  data () {
    return {
      search: ''
    }
  },
  methods: {
     submit: function (event) {
        this.$router.push(`sms/${this.search}`)
       }
     }
  }

Then I have a /sms page located in pages/sms/_sms.vue which is landed on once the form is submitted

<template>
  <div>
    <h1>Success Page {{phoneNumber}} {{$route.params}}</h1>
    <KeyboardCard/>
  </div>
</template>

<script>
import KeyboardCard from '~/components/KeyboardCard.vue'
import axios from '~/plugins/axios'

export default {
  asyncData ({ params, error }) {
    return axios.get('/api/sms/' + params.sms)
      .then((res) => {
        console.log(res)
        console.log(params)
        return { phoneNumber: res.data }
      })
      .catch((e) => {
        error({ statusCode: 404, message: 'Sms not found' })
      })
  },
  components: {
    KeyboardCard
  }
}
</script>

And finally within api/sms/sms.js I have this on express running. (note my API keys are replaced with placeholder)

router.get('/sms/:sms', (req, res, next) => {
  console.log('express reached')
  const accountSid = 'ACCOUNTSIDPLACEHOLDER'
  const authToken = 'AUTHTOKENPLACEHOLDER'

  const client = require('twilio')(accountSid, authToken)

  client.messages.create({
    to: '14169190118',
    from: '+16477993562',
    body: 'This is the ship that made the Kessel Run in 14 parsecs?!'
  })
    .then((message) => console.log(message.sid))
})

How can I pass the parameter.sms within the to field in my /api/routes/sms.js Expected: When user enters # into the input how can the api/sms/:sms be called dynamically to the number that was typed in the input component?

Thanks in advance if anyone see's whats going on here :)

Edit: I have my middleware defined in the nuxt.config file, like so:

serverMiddleware: [
    // API middleware
    '~/api/index.js'
  ]

and my api/index.js file has:

const express = require('express')

// Create express instnace
const app = express()

// Require API route
const sms = require('./routes/sms')

// Import API Routes
app.use(sms)

// Export the server middleware
module.exports = {
  path: '/api',
  handler: app
}

Answer 1

I guess this is more an Express.js related question than a Vue.js question.

You can use the passed sms param from your request, like this:

router.get('/sms/:sms', (req, res, next) => {
  console.log('express reached')
  const accountSid = 'ACCOUNTSIDPLACEHOLDER'
  const authToken = 'AUTHTOKENPLACEHOLDER'

  const client = require('twilio')(accountSid, authToken)

  client.messages.create({
    to: req.params.sms,
    from: '+16477993562',
    body: 'This is the ship that made the Kessel Run in 14 parsecs?!'
  })
    .then((message) => console.log(message.sid))
})