WIP

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "printWidth": 120,
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}

package-lock.json

@@ -1569,14 +1569,6 @@
                 "@babel/core": "^7.0.0-beta.49",
                 "deepmerge": "^2.1.0",
                 "object.omit": "^3.0.0"
-            },
-            "dependencies": {
-                "deepmerge": {
-                    "version": "2.2.1",
-                    "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
-                    "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
-                    "dev": true
-                }
             }
         },
         "babel-plugin-dynamic-import-node": {
@@ -2883,9 +2875,10 @@
             "dev": true
         },
         "deepmerge": {
-            "version": "4.2.2",
+            "version": "2.2.1",
-            "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+            "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
-            "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg=="
+            "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
+            "dev": true
         },
         "default-gateway": {
             "version": "4.2.0",
@@ -5701,9 +5694,9 @@
             "dev": true
         },
         "laravel-mix": {
-            "version": "4.1.4",
+            "version": "5.0.0",
-            "resolved": "https://registry.npmjs.org/laravel-mix/-/laravel-mix-4.1.4.tgz",
+            "resolved": "https://registry.npmjs.org/laravel-mix/-/laravel-mix-5.0.0.tgz",
-            "integrity": "sha512-fpFNpPyYAdeZ5mozlKbHpw+tCiRFUCCdSsK/D2+yYhlyIEbzPcAe4ar5cjeT33TnDNiKXSS42cB58yUSW5Y5tg==",
+            "integrity": "sha512-QpsVoM6zGa83E5AUMwOmi4wKdYfJMaW1jIpJ1CCL74abOHj1ne25njBQ4detO41GAjIkZIkrmwECEcOebC8+3Q==",
             "dev": true,
             "requires": {
                 "@babel/core": "^7.2.0",
@@ -5738,7 +5731,7 @@
                 "terser": "^3.11.0",
                 "terser-webpack-plugin": "^1.2.2",
                 "vue-loader": "^15.4.2",
-                "webpack": "^4.27.1",
+                "webpack": "^4.36.1",
                 "webpack-cli": "^3.1.2",
                 "webpack-dev-server": "^3.1.14",
                 "webpack-merge": "^4.1.0",
@@ -9913,8 +9906,17 @@
             "version": "2.3.1",
             "resolved": "https://registry.npmjs.org/vue-meta/-/vue-meta-2.3.1.tgz",
             "integrity": "sha512-hnZvDNvLh+PefJLfYkZhG6cSBNKikgQyiEK8lI/P2qscM1DC/qHHOfdACPQ/VDnlaWU9VlcobCTNyVtssTR4XQ==",
+            "dev": true,
             "requires": {
                 "deepmerge": "^4.0.0"
+            },
+            "dependencies": {
+                "deepmerge": {
+                    "version": "4.2.2",
+                    "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+                    "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
+                    "dev": true
+                }
             }
         },
         "vue-style-loader": {

package.json

@@ -10,27 +10,24 @@
         "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
     },
     "devDependencies": {
-        "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+        "@inertiajs/inertia": "^0.1.7",
-        "@inertiajs/inertia": "^0.1.0",
         "@inertiajs/inertia-vue": "^0.1.0",
         "autosize": "^4.0.2",
         "axios": "^0.18",
         "cross-env": "^5.1",
         "eslint": "^5.14.1",
         "eslint-plugin-vue": "^5.2.2",
-        "fuse.js": "^3.4.2",
+        "fuse.js": "^3.4.6",
-        "laravel-mix": "^4.0.7",
+        "laravel-mix": "^5.0.0",
         "lodash": "^4.17.5",
-        "popper.js": "^1.12",
+        "popper.js": "^1.16.0",
         "portal-vue": "^1.5.1",
         "postcss-import": "^12.0.1",
         "postcss-nesting": "^7.0.0",
         "resolve-url-loader": "^2.3.1",
         "tailwindcss": "^1.0.1",
         "vue": "^2.6.6",
+        "vue-meta": "^2.3.1",
         "vue-template-compiler": "^2.6.6"
-    },
-    "dependencies": {
-        "vue-meta": "^2.2.2"
     }
 }

resources/js/Pages/Dashboard/Index.vue

@@ -1,7 +1,11 @@
 <template>
   <div>
     <h1 class="mb-8 font-bold text-3xl">Dashboard</h1>
-    <p class="mb-12 leading-normal">Hey there! Welcome to Ping CRM, a demo app designed to help illustrate how <a class="text-indigo-500 underline hover:text-orange-600" href="https://github.com/inertiajs">Inertia.js</a> works.</p>
+    <p class="mb-12 leading-normal">
+      Hey there! Welcome to Ping CRM, a demo app designed to help illustrate how
+      <a class="text-indigo-500 underline hover:text-orange-600" href="https://github.com/inertiajs">Inertia.js</a>
+      works.
+    </p>
     <div>
       <inertia-link class="btn-indigo-500" href="/500">500 error</inertia-link>
       <inertia-link class="btn-indigo-500" href="/404">404 error</inertia-link>

resources/js/Shared/Layout.vue

@@ -35,7 +35,7 @@
         </div>
         <div class="flex flex-grow overflow-hidden">
           <main-menu :url="url()" class="bg-indigo-800 flex-no-shrink w-56 p-12 hidden md:block overflow-y-auto" />
-          <div class="w-full overflow-hidden px-4 py-8 md:p-12 overflow-y-auto" scroll-region>
+          <div class="flex-1 overflow-hidden px-4 py-8 md:p-12 overflow-y-auto" scroll-region>
             <flash-messages />
             <slot />
           </div>

tailwind.config.js

@@ -4,10 +4,7 @@ module.exports = {
   theme: {
     extend: {
       fontFamily: {
-        sans: [
+        sans: ['Cerebri Sans', ...defaultTheme.fontFamily.sans],
-          'Cerebri Sans',
-          ...defaultTheme.fontFamily.sans,
-        ],
       },
       colors: {
         indigo: {
@@ -21,7 +18,7 @@ module.exports = {
         },
       },
       boxShadow: theme => ({
-        'outline': '0 0 0 2px ' + theme('colors.indigo.500'),
+        outline: '0 0 0 2px ' + theme('colors.indigo.500'),
       }),
       fill: theme => theme('colors'),
     },

webpack.mix.js

@@ -2,7 +2,6 @@ const cssImport = require('postcss-import')
 const cssNesting = require('postcss-nesting')
 const mix = require('laravel-mix')
 const path = require('path')
-const tailwindcss = require('tailwindcss')
 
 /*
  |--------------------------------------------------------------------------
@@ -15,23 +14,17 @@ const tailwindcss = require('tailwindcss')
  |
  */
 
-mix.js('resources/js/app.js', 'public/js')
+mix
-  .postCss('resources/css/app.css', 'public/css', [
+  .js('resources/js/app.js', 'public/js')
-    cssImport(),
+  .postCss('resources/css/app.css', 'public/css', [cssImport(), cssNesting(), require('tailwindcss')])
-    cssNesting(),
-    require('tailwindcss')
-  ])
   .webpackConfig({
     output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
     resolve: {
       alias: {
-        'vue$': 'vue/dist/vue.runtime.esm.js',
+        vue$: 'vue/dist/vue.runtime.esm.js',
         '@': path.resolve('resources/js'),
       },
     },
   })
-  .babelConfig({
-    plugins: ['@babel/plugin-syntax-dynamic-import'],
-  })
   .version()
   .sourceMaps()