🗑 - Remove stylus

Author: trastanechora

README.md

@@ -27,7 +27,6 @@ See deployed app of this template [here](https://nuxt-typescript-starter.netlify
 - 📦 **Vuex** store management with intense typing usage example
 - 🌐 **Axios** ready (With a sample to NewsAPI request)
 - ⚙ **DotEnv** ready ofcourse!
-- 🎨 Expressive, Dynamic, Robust CSS with **Stylus** support
 - 🎭 **Jest** integration ready Unit Test with 100% coverage as starting point (Vuetify and Vuex Integration included!)
 - ✨ **Progressive Web App** by default (Installable / Add to homescreen)
 

components/Logo.vue

@@ -7,7 +7,7 @@
   </div>
 </template>
 
-<style lang="stylus" scoped>
+<style scoped>
 .VueToNuxtLogo {
   display: inline-block;
   animation: turn 2s linear forwards 1s;

components/VuetifyLogo.vue

@@ -2,7 +2,7 @@
   <img class="VuetifyLogo" alt="Vuetify Logo" src="/vuetify-logo.svg" />
 </template>
 
-<style lang="stylus" scoped>
+<style scoped>
 .VuetifyLogo {
   height: 180px;
   width: 180px;

layouts/error.vue

@@ -35,7 +35,7 @@ export default class ErrorLayout extends Vue {
 }
 </script>
 
-<style lang="stylus" scoped>
+<style scoped>
 h1 {
   font-size: 20px;
 }

package.json

@@ -9,7 +9,7 @@
     "build": "nuxt build",
     "generate": "nuxt generate",
     "start": "nuxt start",
-    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
+    "lint": "eslint --ext .ts,.vue --ignore-path .gitignore .",
     "test": "jest"
   },
   "dependencies": {
@@ -18,12 +18,9 @@
     "@nuxtjs/pwa": "^3.0.0-0",
     "nuxt": "2.15.8",
     "nuxt-property-decorator": "^2.7.2",
-    "stylus": "^0.54.8",
-    "stylus-loader": "^3.0.2",
     "vuex": "^3.5.1"
   },
   "devDependencies": {
-    "@fullhuman/postcss-purgecss": "^4.0.3",
     "@nuxt/typescript-build": "^2.1.0",
     "@nuxtjs/eslint-config-typescript": "^1.0.0",
     "@nuxtjs/eslint-module": "^1.0.0",

pages/inspire.vue

@@ -1,7 +1,6 @@
 <template>
   <v-layout>
     <v-flex class="text-center">
-      <img src="/v.png" alt="Vuetify.js" class="mb-5" />
       <blockquote class="blockquote">
         &#8220;First, solve the problem. Then, write the code.&#8221;
         <footer>
@@ -15,9 +14,13 @@
 </template>
 
 <script lang="ts">
-import { Vue } from 'nuxt-property-decorator';
+import { Vue, Component } from 'nuxt-property-decorator';
 
+@Component
 export default class Inspire extends Vue {
   readonly name: string = 'inspire';
+  layout() {
+    return 'default';
+  }
 }
 </script>

pages/news.vue

@@ -56,7 +56,7 @@ export default class News extends Vue {
 }
 </script>
 
-<style lang="stylus" scoped>
+<style scoped>
 .image-preview {
   width: 100%;
 }

store/index.ts

@@ -11,18 +11,18 @@
 // state defined as function
 export const state = () => ({
   pageTitle: ''
-})
+});
 
 // mutations defined as object
 export const mutations = {
   setPageTitle(state: any, param: string) {
-    state.pageTitle = param
+    state.pageTitle = param;
   }
-}
+};
 
 // this is root of store, mutations defined must unique
 export const actions = {
   setPageTitle(store: any, param: string) {
-    store.commit('setPageTitle', param)
+    store.commit('setPageTitle', param);
   }
-}
+};

store/news.ts

@@ -1,8 +1,8 @@
 // “The first step is to establish that something is possible; then probability will occur”
 // - Elon Musk
 
-import axios from 'axios'
-import { Article, NewsapiResponse, NewsState } from '~/@types'
+import axios from 'axios';
+import { Article, NewsapiResponse, NewsState } from '~/@types';
 
 // =================================================
 // State
@@ -25,16 +25,16 @@ export const state = (): NewsState => ({
         'https://www.teslarati.com/wp-content/uploads/2020/07/ANASIS-II-Falcon-9-B1058-LC-40-072020-SpaceX-JRTI-landing-2-c-1024x465.jpg'
     }
   ]
-})
+});
 
 // =================================================
 // Mutations
 // =================================================
 export const mutations = {
   setArticles(state: NewsState, param: Article[]): void {
-    state.articles = param
+    state.articles = param;
   }
-}
+};
 
 // =================================================
 // Actions
@@ -46,11 +46,11 @@ export const actions = {
       url: `https://newsapi.org/v2/top-headlines?country=us&category=technology&apiKey=${process.env.NEWS_API_KEY}`
     })
       .then(async (response: NewsapiResponse) => {
-        await store.commit('setArticles', response.data.articles)
-        return true
+        await store.commit('setArticles', response.data.articles);
+        return true;
       })
       .catch((error) => {
-        return error.response
-      })
+        return error.response;
+      });
   }
-}
+};

tsconfig.json

@@ -21,7 +21,7 @@
       "~/*": ["./*"],
       "@/*": ["./*"]
     },
-    "types": ["@types/node", "@types/jest"]
+    "types": ["@types/node", "@types/jest", "@nuxtjs/vuetify"]
   },
   "exclude": ["node_modules", ".nuxt", "dist"]
 }