Nuxt.js サーバーのIPアドレス(V4)一覧を表示するサンプル

npx create-nuxt-app ip-get

? Choose the package manager Yarn
? Choose UI framework Buefy
? Choose custom server framework None (Recommended)

<script>
export default {
  data () {
    return {
      items: [
        {
          title: 'Home',
          icon: 'home',
          to: { name: 'index' }
        },
        {
          title: 'ip',
          icon: 'lightbulb',
          to: { name: 'ip' }
        }
      ]
    }
  }
}
</script>

<template>
    <b-table :data="items" :columns="columns"></b-table>
</template>
<script>
var os = require('os');

export default {
    data() {       
        return{
            items: [],
            columns: [                
                {
                    field: 'name',
                    label: 'name',
                    width: '150',       
                },               
                {
                    field: 'address',
                    label: 'address',
                    width: '150',
                }
            ]
        }
    },
    async asyncData({ app }) {
        var ip = []
        var net = os.networkInterfaces();

        for (var dev in net) {
            net[dev].forEach(function(details){
                if (!details.internal){
                    switch(details.family){
                        case "IPv4":
                            ip.push({name:dev, address:details.address});
                        break;                    
                    }
                }
            });
        }
        return { items: ip };
    }
}
</script>