diff --git a/generators/new/view/view.ejs.t b/generators/new/view/view.ejs.t
index 550d1103..f09455f0 100644
--- a/generators/new/view/view.ejs.t
+++ b/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: {
diff --git a/jest.config.js b/jest.config.js
index 6e6bd28c..2a2dab54 100644
--- a/jest.config.js
+++ b/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',
diff --git a/src/components/_base-button.unit.js b/src/components/_base-button.unit.js
index f3f5d4bd..d421979f 100644
--- a/src/components/_base-button.unit.js
+++ b/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', () => {
diff --git a/src/components/_base-icon.unit.js b/src/components/_base-icon.unit.js
index f2d834aa..c45ffabe 100644
--- a/src/components/_base-icon.unit.js
+++ b/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', () => {
diff --git a/src/components/_base-input-text.unit.js b/src/components/_base-input-text.unit.js
index 83a08d15..d6b47793 100644
--- a/src/components/_base-input-text.unit.js
+++ b/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', () => {
diff --git a/src/components/_base-link.unit.js b/src/components/_base-link.unit.js
index e9518b9c..80a3ae30 100644
--- a/src/components/_base-link.unit.js
+++ b/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, {
diff --git a/src/components/nav-bar-routes.unit.js b/src/components/nav-bar-routes.unit.js
index 214a9f01..f8498900 100644
--- a/src/components/nav-bar-routes.unit.js
+++ b/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(
diff --git a/src/components/nav-bar.unit.js b/src/components/nav-bar.unit.js
index 69c059ef..5a920bd5 100644
--- a/src/components/nav-bar.unit.js
+++ b/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`, () => {
diff --git a/src/components/nav-bar.vue b/src/components/nav-bar.vue
index e977a04a..ac241914 100644
--- a/src/components/nav-bar.vue
+++ b/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 },
diff --git a/src/main.js b/src/main.js
index 600da08a..a82005e6 100644
--- a/src/main.js
+++ b/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'
diff --git a/src/router/layouts/main.unit.js b/src/router/layouts/main.unit.js
index ae1efa6b..1ccf7f90 100644
--- a/src/router/layouts/main.unit.js
+++ b/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, {
diff --git a/src/router/layouts/main.vue b/src/router/layouts/main.vue
index bb786e81..7f71b8b7 100644
--- a/src/router/layouts/main.vue
+++ b/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 },
diff --git a/src/router/routes.js b/src/router/routes.js
index cffe5996..e2dbc180 100644
--- a/src/router/routes.js
+++ b/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,
diff --git a/src/router/views/_404.unit.js b/src/router/views/_404.unit.js
index d7f3b72d..79db0e95 100644
--- a/src/router/views/_404.unit.js
+++ b/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', () => {
diff --git a/src/router/views/_404.vue b/src/router/views/_404.vue
index 4910a0f4..36bae6a0 100644
--- a/src/router/views/_404.vue
+++ b/src/router/views/_404.vue
@@ -1,5 +1,5 @@
 <script>
-import Layout from '@layouts/main'
+import Layout from '@layouts/main.vue'
 
 export default {
   page: {
diff --git a/src/router/views/_loading.unit.js b/src/router/views/_loading.unit.js
index fb547ed0..8e51c5a8 100644
--- a/src/router/views/_loading.unit.js
+++ b/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', () => {
diff --git a/src/router/views/_loading.vue b/src/router/views/_loading.vue
index 9f1cd169..8cba8547 100644
--- a/src/router/views/_loading.vue
+++ b/src/router/views/_loading.vue
@@ -1,5 +1,5 @@
 <script>
-import Layout from '@layouts/main'
+import Layout from '@layouts/main.vue'
 
 export default {
   page: {
diff --git a/src/router/views/_timeout.unit.js b/src/router/views/_timeout.unit.js
index f4479078..e3f0b317 100644
--- a/src/router/views/_timeout.unit.js
+++ b/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', () => {
diff --git a/src/router/views/_timeout.vue b/src/router/views/_timeout.vue
index 096ba4a6..db64f22d 100644
--- a/src/router/views/_timeout.vue
+++ b/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: {
diff --git a/src/router/views/home.unit.js b/src/router/views/home.unit.js
index 46ac2d9f..26de39d7 100644
--- a/src/router/views/home.unit.js
+++ b/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', () => {
diff --git a/src/router/views/home.vue b/src/router/views/home.vue
index b6f070f2..f322affb 100644
--- a/src/router/views/home.vue
+++ b/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: {
diff --git a/src/router/views/login.unit.js b/src/router/views/login.unit.js
index b2e88f47..1b232364 100644
--- a/src/router/views/login.unit.js
+++ b/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', () => {
diff --git a/src/router/views/login.vue b/src/router/views/login.vue
index 5a8cfce4..024ba3da 100644
--- a/src/router/views/login.vue
+++ b/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'
 
diff --git a/src/router/views/profile.unit.js b/src/router/views/profile.unit.js
index e44087d9..fd29171d 100644
--- a/src/router/views/profile.unit.js
+++ b/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', () => {
diff --git a/src/router/views/profile.vue b/src/router/views/profile.vue
index 2e1ae6fc..ff5efb38 100644
--- a/src/router/views/profile.vue
+++ b/src/router/views/profile.vue
@@ -1,5 +1,5 @@
 <script>
-import Layout from '@layouts/main'
+import Layout from '@layouts/main.vue'
 
 export default {
   page() {
diff --git a/vue.config.js b/vue.config.js
index d53338a8..f023ae80 100644
--- a/vue.config.js
+++ b/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.