my naming preferences

vue naming

PascalCase:
  - component file name (best practice)
  e.g.
    "Foo.vue"
    "FooBar.vue"
    
  - component name (match the file name, for default export)
  e.g.
    export default {
      name: 'Foo',
      components: {
        // @ is an alias to /src in Vue CLI 3
        // webpackChunkName uses "kebab-case", for consistency with route's naming below
        // no need to add /* webpackPrefetch: true */ as Vue CLI 3 handles it by default
        FooBar: () => import(/* webpackChunkName: "foo-bar" */ '@/components/FooBar.vue'),
      },
      ...
    };
    export default {
      name: 'FooBar',
      ...
    };

kebab-case:
  - webpackChunkName (webpack magic comment)
  - router name (handy for transforming into nav titles)
  e.g.
    routes: [
      {
        path: '/foo',
        name: 'foo',
        // @ alias is not necessary as router.js is usually next to views folder 
        component: () => import(/* webpackChunkName: "foo" */ './views/Foo.vue'),
      },
      {
        path: '/foo/bar',
        name: 'foo-bar',
        component: () => import(/* webpackChunkName: "foo-bar" */ './views/FooBar.vue'),
      },
    ],
    <router-link :to="{ name: 'foo' }">/foo</router-link>
    <router-link :to="{ name: 'foo-bar' }">/foo/bar</router-link>

camelCase:
  - router view name (better to be a regular js object prop name)
  e.g.
    routes: [
      {
        path: '/',
        name: 'index',
        components: {
          default: Index,
          foo: Foo,
          fooBar: FooBar,
        },
      },
    ],
    <router-view class="index"></router-view>
    <router-view class="foo" name="foo"></router-view>
    <router-view class="foo-bar" name="fooBar"></router-view>

"my_underscore" to "myUnderscore":

const camelize = text => (`${text}` || '').split('_').map((str, i) => (i === 0 || !str) ? str : (str[0].toUpperCase() + str.slice(1))).join('');
camelize("my_underscore"); // "myUnderscore"