[Vuejs]-How do you build page within a folder in Vue?

Create social folder inside pages, then create fb.vue inside social folder.
This should work

I normally load the layout.vue from the router and treat everything else as a child which is passed though as a router-view, this then saves having an index.vue for each parent.

But you would always want to make a directory to contain the social pages. Then would be a case of simply adding to the router.js file.

layouts/template.vue

<template>
  <router-view></router-view>
</template>

<script>
export default {
  name: 'layout-template'
}
</script>

router.js

  ...
  /*
   * Social
   */
  {
    path: '/social',
    component: () => import('./layout/template.vue'),
    props: true,
    // rendered inside <router-view>
    children: [{
      path: '/',
      component: () => import('./pages/social/index.vue')
    }, {
      path: 'fb',
      component: () => import('./pages/social/fb.vue')
    }, {
      path: 'twitter',
      component: () => import('./pages/social/twitter.vue')
    },
    // or do something more dynamic
    {
      path: ':network', // accessible in component though `$route.params.network`
      props: true, // makes accessible though `props: ['network']` 
      component: () => import('./pages/social/network.vue')
    }]
  },
  ...

./pages/social/index.vue – could show something /social homepage or change route to import('./pages/not-found.vue') instead.

./pages/social/network.vue

<template>
  ...
</template>

<script>
export default {
  name: "page-social-network",
  props: {
    network: {
      type: String,
      default: ''
    }
  },
  created() {
    // or through
    this.$route.params.network
  }
};
</script>

<style lang="scss" scoped></style>

See: https://router.vuejs.org/guide/essentials/passing-props.html#boolean-mode

Otherwise is just standard vue pages