wip: card sm

components/CardBook.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="card-book">
+    <img class="w-2/4 float-left" src="@/assets/images/card-cover.jpg" alt="card" />
+    <div class="w-2/4 px-2 py-2 float-right">
+      <span class="text-xs text-gray-700">Kevin Kwan</span>
+      <h1 class="font-bold text-sm">Crazy rich asians</h1>
+      <div class="flex justify-between items-center">
+        <v-rating v-model="rating" color="#F2C94C" size="10"></v-rating>
+        <span class="text-xs text-gray-700">252 reviews</span>
+      </div>
+      <p class="text-xs text-gray-700 mt-1 leading-none">
+        the outrageously funny debut novel about three super-rich, pedigreed Chinese families and the gossip
+      </p>
+      <span class="font-bold text-sm">$4.99</span>
+      <span class="text-gray-600 text-xs line-through">$24.12</span>
+      <v-btn small class="uppercase w-full" outlined color="indigo">Buy Now</v-btn>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from 'nuxt-property-decorator'
+@Component({})
+export default class CardBook extends Vue {
+  private rating: number = 2
+}
+</script>
+<style lang="scss">
+.card-book {
+  .v-rating .v-icon {
+    padding: 0.1rem 0.25rem 0.25rem 0;
+  }
+}
+</style>

config/tailwind.config.js

@@ -0,0 +1,11 @@
+/*
+ ** TailwindCSS Configuration File
+ **
+ ** Docs: https://tailwindcss.com/docs/configuration
+ ** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
+ */
+module.exports = {
+  theme: {},
+  variants: {},
+  plugins: []
+}

nuxt.config.ts

@@ -102,7 +102,7 @@ const config: Configuration = {
     /*
      ** You can extend webpack config here
      */
-    extractCSS: true,
+    extractCSS: { ignoreOrder: true },
     extend(config: WebpackConfiguration, ctx) {},
     // Config for Nuxt Property Decorator
     babel: {

pages/bookshop.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="card">
+    <CardBook />
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue } from 'nuxt-property-decorator'
+import CardBook from '@/components/CardBook.vue'
+@Component({
+  components: {
+    CardBook
+  }
+})
+export default class extends Vue {}
+</script>

pages/index.vue

@@ -1,6 +1,7 @@
 <template>
   <section>
     <h1 class="header">Nuxt TypeScript Starter</h1>
+    <nuxt-link to="/bookshop">Go to BookShop</nuxt-link>
     <div class="cards">
       <Card v-for="person in people" :key="person.id" :person="person"></Card>
     </div>

scripts/verifyCommitMsg.js

@@ -10,7 +10,7 @@ if (!commitRE.test(msg)) {
   console.log()
   console.error(
     `  ${chalk.bgRed.white(' ERROR ')} ${chalk.red(`invalid commit message format.`)}\n\n` +
-      chalk.red(`  Proper commit message format is required for automated changelog generation. Examples:\n\n`) +
+      chalk.red(`Proper commit message format is required for automated changelog generation. Examples:\n\n`) +
       `    ${chalk.green(`feat(compiler): add 'comments' option`)}\n` +
       `    ${chalk.green(`fix(v-model): handle events on blur (close #28)`)}\n\n` +
       chalk.red(`  See .github/commit-convention.md for more details.\n`)