chore: update structure with latest changes

Author: johnleider

packages/@vuetify/presets/generator/templates/base/src/components/README.md

@@ -1,20 +1,12 @@
 # Components
+
 > Create your regular and base components here
 
 This folder is for organizing your project's components. It is structured to support the official Vue [**style-guide**](https://vuejs.org/v2/style-guide/#Component-files-strongly-recommended).
-Below are _examples_ of varoius project structures for **components**.
-
-### Custom
-A custom component is one that is used in more than one place but is not generic enough to used as a _app_ component.
 
 ```bash
-.
-└── components
-    ├── CustomComponent.vue
-    └── CustomComponentTwo.vue
-```
-
 ### App
+
 [**App components**](https://vuejs.org/v2/style-guide/#Base-component-names-strongly-recommended) are global components that should always be in the root of the `/app` folder. These components will be automatically bootstrapped into Vue via the **app.js** plugin.
 
 ```bash
@@ -30,7 +22,8 @@ A custom component is one that is used in more than one place but is not generic
         └── vuetify.js
 ```
 
-**Example usage**
+## Example usage
+
 This is an example of how to use **app components**; global components that can be used in any other component.
 
 ```vue
@@ -71,3 +64,14 @@ This is an example of how to use **app components**; global components that can
 ```
 
 > The component's **name** property is automatically prefixed with the word `App`. For example, a name of `Btn` would yield `AppBtn`.
+
+## Custom
+
+A custom component is one that is used in more than one place but is not generic enough to used as a _app_ component.
+
+```bash
+.
+└── components
+    ├── CustomComponent.vue
+    └── CustomComponentTwo.vue
+```

packages/@vuetify/presets/generator/templates/base/src/components/app/Btn.vue

@@ -11,7 +11,7 @@
 
 <script>
   export default {
-    name: 'Btn',
+    name: 'AppBtn',
 
     props: {
       color: {
@@ -23,5 +23,6 @@
 </script>
 
 <style lang="sass">
-  // .v-btn--app
+  .v-btn--app
+    //
 </style>

packages/@vuetify/presets/generator/templates/base/src/layouts/README.md

@@ -1,4 +1,5 @@
 # Layouts
+
 > Accommodate multiple page structures with dynamic layouts.
 
 Use layouts to make large visual changes between different views.

packages/@vuetify/presets/generator/templates/base/src/layouts/default/AppBar.vue

@@ -5,7 +5,5 @@
 </template>
 
 <script>
-  export default {
-    name: 'AppBar',
-  }
+  export default { name: 'DefaultAppBar' }
 </script>

packages/@vuetify/presets/generator/templates/base/src/layouts/default/View.vue

@@ -7,7 +7,5 @@
 </template>
 
 <script>
-  export default {
-    name: 'AppView',
-  }
+  export default { name: 'DefaultView' }
 </script>

packages/@vuetify/presets/generator/templates/base/src/layouts/default/Index.vue renamed to packages/@vuetify/presets/generator/templates/base/src/layouts/default/index.vue

@@ -1,6 +1,6 @@
 <template>
   <v-app>
-    <default-bar />
+    <default-app-bar />
 
     <default-view />
   </v-app>
@@ -11,7 +11,7 @@
     name: 'DefaultLayout',
 
     components: {
-      DefaultBar: () => import('./AppBar'),
+      DefaultAppBar: () => import('./AppBar'),
       DefaultView: () => import('./View'),
     },
   }

packages/@vuetify/presets/generator/templates/base/src/plugins/README.md

@@ -1,4 +1,5 @@
 # Plugins
+
 > Additions to Vue and/or Vuetify
 
 For new plugins, create a JavaScript file, perform your logic, and import it into `./srcs/plugins/index.js`

packages/@vuetify/presets/generator/templates/base/src/plugins/app.js

@@ -2,26 +2,19 @@
  * plugins/app.js
  *
  * Automatically loads and bootstraps files
- * in the `./src/components/app` folder.
+ * in the `./src/components/` folder.
  */
 
-// Imports
-import Vue from 'vue'
-import {
-  camelCase,
-  upperFirst,
-} from 'lodash'
+export function registerComponents (app) {
+  // Get all .vue files within `src/components/app`
+  const requireComponent = require.context('@/components', true, /\.vue$/)
 
-// Get all .vue files within `src/components/app`
-const requireComponent = require.context('@/components/app', true, /\.vue$/)
+  for (const file of requireComponent.keys()) {
+    const componentConfig = requireComponent(file)
 
-for (const file of requireComponent.keys()) {
-  const componentConfig = requireComponent(file)
-  const name = file
-    .replace(/index.js/, '')
-    .replace(/^\.\//, '')
-    .replace(/\.\w+$/, '')
-  const componentName = upperFirst(camelCase(name))
-
-  Vue.component(`App${componentName}`, componentConfig.default || componentConfig)
+    app.component(
+      componentConfig.default.name,
+      componentConfig.default || componentConfig,
+    )
+  }
 }

packages/@vuetify/presets/generator/templates/base/src/router/index.js

@@ -10,30 +10,30 @@ import Router from 'vue-router'
 
 Vue.use(Router)
 
-const router = new Router({
-  mode: 'history',
-  base: process.env.BASE_URL,
-  scrollBehavior: (to, from, savedPosition) => {
-    if (to.hash) return { selector: to.hash }
-    if (savedPosition) return savedPosition
+export function createRouter () {
+  return new Router({
+    mode: 'history',
+    base: process.env.BASE_URL,
+    scrollBehavior: (to, from, savedPosition) => {
+      if (to.hash) return { selector: to.hash }
+      if (savedPosition) return savedPosition
 
-    return { x: 0, y: 0 }
-  },
-  routes: [
-    {
-      path: '/',
-      // Layouts allow you to define different
-      // structures for different view
-      component: () => import('@/layouts/default/Index.vue'),
-      children: [
-        {
-          path: '',
-          name: 'Home',
-          component: () => import('@/views/home/Index.vue'),
-        },
-      ],
+      return { x: 0, y: 0 }
     },
-  ],
-})
-
-export default router
+    routes: [
+      {
+        path: '/',
+        // Layouts allow you to define different
+        // structures for different view
+        component: () => import('@/layouts/default'),
+        children: [
+          {
+            path: '',
+            name: 'Home',
+            component: () => import('@/views/home'),
+          },
+        ],
+      },
+    ],
+  })
+}