force .vue extensions for better vetur autocompletion

generators/new/view/view.ejs.t

@@ -6,7 +6,7 @@ to: "src/router/views/<%= h.changeCase.kebab(name) %>.vue"
   const importName = h.changeCase.pascal(fileName)
   const titleName = h.changeCase.title(name)
 %><script>
-import Layout from '@layouts/main'
+import Layout from '@layouts/main.vue'
 
 export default {
   page: {

jest.config.js

@@ -10,7 +10,7 @@ module.exports = {
   globalTeardown: '<rootDir>/tests/unit/global-teardown',
   setupTestFrameworkScriptFile: '<rootDir>/tests/unit/matchers',
   testMatch: ['**/(*.)unit.js'],
-  moduleFileExtensions: ['js', 'json', 'vue'],
+  moduleFileExtensions: ['js', 'json'],
   transform: {
     '^.+\\.vue$': 'vue-jest',
     '^.+\\.js$': 'babel-jest',

src/components/_base-button.unit.js

@@ -1,4 +1,4 @@
-import BaseButton from './_base-button'
+import BaseButton from './_base-button.vue'
 
 describe('@components/_base-button', () => {
   it('renders its content', () => {

src/components/_base-icon.unit.js

@@ -1,4 +1,4 @@
-import BaseIcon from './_base-icon'
+import BaseIcon from './_base-icon.vue'
 
 describe('@components/_base-icon', () => {
   it('renders a font-awesome icon', () => {

src/components/_base-input-text.unit.js

@@ -1,4 +1,4 @@
-import BaseInputText from './_base-input-text'
+import BaseInputText from './_base-input-text.vue'
 
 describe('@components/_base-input-text', () => {
   it('works with v-model', () => {

src/components/_base-link.unit.js

@@ -1,4 +1,4 @@
-import BaseLink from './_base-link'
+import BaseLink from './_base-link.vue'
 
 const mountBaseLink = (options = {}) => {
   return mount(BaseLink, {

src/components/nav-bar-routes.unit.js

@@ -1,4 +1,4 @@
-import NavBarRoutes from './nav-bar-routes'
+import NavBarRoutes from './nav-bar-routes.vue'
 
 const mountRoutes = (options) => {
   return mount(

src/components/nav-bar.unit.js

@@ -1,4 +1,4 @@
-import NavBar from './nav-bar'
+import NavBar from './nav-bar.vue'
 
 describe('@components/nav-bar', () => {
   it(`displays the user's name in the profile link`, () => {

src/components/nav-bar.vue

@@ -1,6 +1,6 @@
 <script>
 import { authComputed } from '@state/helpers'
-import NavBarRoutes from './nav-bar-routes'
+import NavBarRoutes from './nav-bar-routes.vue'
 
 export default {
   components: { NavBarRoutes },

src/main.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import App from './app'
+import App from './app.vue'
 import router from '@router'
 import store from '@state/store'
 import '@components/_globals'

src/router/layouts/main.unit.js

@@ -1,6 +1,6 @@
-import MainLayout from './main'
+import MainLayout from './main.vue'
 
-describe('@layouts/main', () => {
+describe('@layouts/main.vue', () => {
   it('renders its content', () => {
     const slotContent = '<p>Hello!</p>'
     const { element } = shallowMount(MainLayout, {

src/router/layouts/main.vue

@@ -1,5 +1,5 @@
 <script>
-import NavBar from '@components/nav-bar'
+import NavBar from '@components/nav-bar.vue'
 
 export default {
   components: { NavBar },

src/router/routes.js

@@ -4,12 +4,12 @@ export default [
   {
     path: '/',
     name: 'home',
-    component: () => lazyLoadView(import('@views/home')),
+    component: () => lazyLoadView(import('@views/home.vue')),
   },
   {
     path: '/login',
     name: 'login',
-    component: () => lazyLoadView(import('@views/login')),
+    component: () => lazyLoadView(import('@views/login.vue')),
     meta: {
       beforeResolve(routeTo, routeFrom, next) {
         // If the user is already logged in
@@ -26,7 +26,7 @@ export default [
   {
     path: '/profile',
     name: 'profile',
-    component: () => lazyLoadView(import('@views/profile')),
+    component: () => lazyLoadView(import('@views/profile.vue')),
     meta: {
       authRequired: true,
     },
@@ -35,7 +35,7 @@ export default [
   {
     path: '/profile/:username',
     name: 'username-profile',
-    component: () => lazyLoadView(import('@views/profile')),
+    component: () => lazyLoadView(import('@views/profile.vue')),
     meta: {
       authRequired: true,
       beforeResolve(routeTo, routeFrom, next) {
@@ -78,7 +78,7 @@ export default [
   {
     path: '/404',
     name: '404',
-    component: require('@views/_404').default,
+    component: require('@views/_404.vue').default,
     // Allows props to be passed to the 404 page through route
     // params, such as `resource` to define what wasn't found.
     props: true,
@@ -110,13 +110,13 @@ function lazyLoadView(AsyncView) {
   const AsyncHandler = () => ({
     component: AsyncView,
     // A component to use while the component is loading.
-    loading: require('@views/_loading').default,
+    loading: require('@views/_loading.vue').default,
     // Delay before showing the loading component.
     // Default: 200 (milliseconds).
     delay: 400,
     // A fallback component in case the timeout is exceeded
     // when loading the component.
-    error: require('@views/_timeout').default,
+    error: require('@views/_timeout.vue').default,
     // Time before giving up trying to load the component.
     // Default: Infinity (milliseconds).
     timeout: 10000,

src/router/views/_404.unit.js

@@ -1,4 +1,4 @@
-import View404 from './_404'
+import View404 from './_404.vue'
 
 describe('@views/404', () => {
   it('is a valid view', () => {

src/router/views/_404.vue

@@ -1,5 +1,5 @@
 <script>
-import Layout from '@layouts/main'
+import Layout from '@layouts/main.vue'
 
 export default {
   page: {

src/router/views/_loading.unit.js

@@ -1,4 +1,4 @@
-import Loading from './_loading'
+import Loading from './_loading.vue'
 
 describe('@views/loading', () => {
   it('is a valid view', () => {

src/router/views/_loading.vue

@@ -1,5 +1,5 @@
 <script>
-import Layout from '@layouts/main'
+import Layout from '@layouts/main.vue'
 
 export default {
   page: {

src/router/views/_timeout.unit.js

@@ -1,4 +1,4 @@
-import Timeout from './_timeout'
+import Timeout from './_timeout.vue'
 
 describe('@views/timeout', () => {
   it('is a valid view', () => {

src/router/views/_timeout.vue

@@ -1,7 +1,7 @@
 <script>
 import axios from 'axios'
-import Layout from '@layouts/main'
-import LoadingView from '@views/_loading'
+import Layout from '@layouts/main.vue'
+import LoadingView from './_loading.vue'
 
 export default {
   page: {

src/router/views/home.unit.js

@@ -1,4 +1,4 @@
-import Home from './home'
+import Home from './home.vue'
 
 describe('@views/home', () => {
   it('is a valid view', () => {

src/router/views/home.vue

@@ -1,6 +1,6 @@
 <script>
 import appConfig from '@src/app.config'
-import Layout from '@layouts/main'
+import Layout from '@layouts/main.vue'
 
 export default {
   page: {

src/router/views/login.unit.js

@@ -1,4 +1,4 @@
-import Login from './login'
+import Login from './login.vue'
 
 describe('@views/login', () => {
   it('is a valid view', () => {

src/router/views/login.vue

@@ -1,5 +1,5 @@
 <script>
-import Layout from '@layouts/main'
+import Layout from '@layouts/main.vue'
 import { authMethods } from '@state/helpers'
 import appConfig from '@src/app.config'
 

src/router/views/profile.unit.js

@@ -1,4 +1,4 @@
-import Profile from './profile'
+import Profile from './profile.vue'
 
 describe('@views/profile', () => {
   it('is a valid view', () => {

src/router/views/profile.vue

@@ -1,5 +1,5 @@
 <script>
-import Layout from '@layouts/main'
+import Layout from '@layouts/main.vue'
 
 export default {
   page() {

vue.config.js

@@ -2,22 +2,26 @@ const appConfig = require('./src/app.config')
 
 /** @type import('@vue/cli-service').ProjectOptions */
 module.exports = {
-  configureWebpack: {
+  // https://github.com/neutrinojs/webpack-chain/tree/v4#getting-started
+  chainWebpack(config) {
     // We provide the app's title in Webpack's name field, so that
     // it can be accessed in index.html to inject the correct title.
-    name: appConfig.title,
+    config.set('name', appConfig.title)
+
     // Set up all the aliases we use in our app.
-    resolve: {
-      alias: require('./aliases.config').webpack,
-    },
-    performance: {
-      // Only enable performance hints for production builds,
-      // outside of tests.
-      hints:
-        process.env.NODE_ENV === 'production' &&
+    config.resolve.alias.clear().merge(require('./aliases.config').webpack)
+
+    // Don't allow importing .vue files without the extension, as
+    // it's necessary for some Vetur autocompletions.
+    config.resolve.extensions.delete('.vue')
+
+    // Only enable performance hints for production builds,
+    // outside of tests.
+    config.performance.hints(
+      process.env.NODE_ENV === 'production' &&
         !process.env.VUE_APP_TEST &&
-        'warning',
-    },
+        'warning'
+    )
   },
   css: {
     // Enable CSS source maps.