🎨 move <style> to bottom of vue component files

Author: SimulatedGREG

template/app/src/renderer/App.vue

@@ -1,30 +1,3 @@
-<style>
-  @import url(https://fonts.googleapis.com/css?family=Lato:300);
-
-  * {
-    margin: 0;
-    padding: 0;
-  }
-
-  html,
-  body { height: 100%; }
-
-  body {
-    align-items: center;
-    background:
-      radial-gradient(
-        ellipse at center,
-        rgba(255, 255, 255, 1) 0%,
-        rgba(229, 229, 229, .85) 100%
-      );
-    background-position: center;
-    display: flex;
-    font-family: Lato, Helvetica, sans-serif;
-    justify-content: center;
-    text-align: center;
-  }
-</style>
-
 <template>
   <div id="#app">
     {{#isEnabled plugins 'vue-router'}}
@@ -55,3 +28,30 @@
 {{/isEnabled}}
   }{{#if eslint}}{{#if_eq eslintConfig 'airbnb'}};{{/if_eq}}{{/if}}
 </script>
+
+<style>
+  @import url(https://fonts.googleapis.com/css?family=Lato:300);
+
+  * {
+    margin: 0;
+    padding: 0;
+  }
+
+  html,
+  body { height: 100%; }
+
+  body {
+    align-items: center;
+    background:
+      radial-gradient(
+        ellipse at center,
+        rgba(255, 255, 255, 1) 0%,
+        rgba(229, 229, 229, .85) 100%
+      );
+    background-position: center;
+    display: flex;
+    font-family: Lato, Helvetica, sans-serif;
+    justify-content: center;
+    text-align: center;
+  }
+</style>

template/app/src/renderer/components/LandingPageView.vue

@@ -1,10 +1,3 @@
-<style scoped>
-  img {
-    margin-top: -25px;
-    width: 450px;
-  }
-</style>
-
 <template>
   <div>
     <img src="./LandingPageView/assets/logo.png" alt="electron-vue">
@@ -34,3 +27,10 @@
     name: 'landing-page'{{#if eslint}}{{#if_eq eslintConfig 'airbnb'}},{{/if_eq}}{{/if}}
   }{{#if eslint}}{{#if_eq eslintConfig 'airbnb'}};{{/if_eq}}{{/if}}
 </script>
+
+<style scoped>
+  img {
+    margin-top: -25px;
+    width: 450px;
+  }
+</style>

template/app/src/renderer/components/LandingPageView/CurrentPage.vue

@@ -1,17 +1,3 @@
-<style scoped>
-  code {
-    background-color: rgba(40, 56, 76, .5);
-    border-radius: 3px;
-    color: #fff;
-    font-weight: bold;
-    padding: 3px 6px;
-    margin: 0 3px;
-    vertical-align: bottom;
-  }
-
-  p { line-height: 24px; }
-</style>
-
 <template>
   <p>
     You are currently at <code>`\{{ $route.path }}`</code> on the <code>`\{{ $route.name }}`</code> view.
@@ -31,3 +17,17 @@
     }{{#if_eq eslintConfig 'airbnb'}},{{/if_eq}}
   }{{#if_eq eslintConfig 'airbnb'}};{{/if_eq}}
 </script>
+
+<style scoped>
+  code {
+    background-color: rgba(40, 56, 76, .5);
+    border-radius: 3px;
+    color: #fff;
+    font-weight: bold;
+    padding: 3px 6px;
+    margin: 0 3px;
+    vertical-align: bottom;
+  }
+
+  p { line-height: 24px; }
+</style>

template/app/src/renderer/components/LandingPageView/Links.vue

@@ -1,11 +1,19 @@
+<template>
+  <ul>
+    <li><a href="https://simulatedgreg.gitbooks.io/electron-vue/content/index.html">documentation</a></li> |
+    <li><a href="http://electron.atom.io/">electron</a></li> |
+    <li><a href="http://vuejs.org/">vue.js</a></li>
+  </ul>
+</template>
+
 <style scoped>
   a {
     color: rgb(50, 174, 110);
     text-decoration: none;
   }
-  
-  a:hover { 
-    color: rgb(40, 56, 76); 
+
+  a:hover {
+    color: rgb(40, 56, 76);
   }
 
   ul {
@@ -15,11 +23,3 @@
 
   li { display: inline-block; }
 </style>
-
-<template>
-  <ul>
-    <li><a href="https://simulatedgreg.gitbooks.io/electron-vue/content/index.html">documentation</a></li> |
-    <li><a href="http://electron.atom.io/">electron</a></li> |
-    <li><a href="http://vuejs.org/">vue.js</a></li>
-  </ul>
-</template>