pug connected

andrejsharapov · Sep 15, 2022 · e2d967a · e2d967a
1 parent df63144
commit e2d967a
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 39 deletions.
diff --git a/package.json b/package.json
@@ -15,6 +15,8 @@
     "core-js": "^3.23.5",
     "eslint": "^6.8.0",
     "eslint-plugin-vue": "^6.2.2",
+    "pug": "^3.0.2",
+    "pug-plain-loader": "^1.1.0",
     "vue": "^2.7.7",
     "vue-template-compiler": "^2.7.7"
   },

diff --git a/src/App.vue b/src/App.vue
@@ -1,16 +1,13 @@
-<template>
-  <div id="app">
-    <div class="container">
-      <h1 class="message">
-        {{ package.title }}
-        <strong>for <span>Vue</span></strong>
-      </h1>
-      <p>
-        {{ package.desc }}
-      </p>
-      <ListShadows />
-    </div>
-  </div>
+<template lang="pug">
+#app
+  .container
+    h1.message {{ package.title }}
+      strong for 
+        span Vue
+
+    p {{ package.desc }}
+
+    ListShadows
 </template>
 
 <script>
@@ -69,4 +66,4 @@ body {
 .message span {
   color: var(--vue-color);
 }
-</style>
+</style>
diff --git a/src/components/ListShadows.vue b/src/components/ListShadows.vue
@@ -1,33 +1,30 @@
-<template>
-  <div>
-    <!-- ANCHOR use shadow name -->
-    <div class="list">
-      <div class="list-item" v-box-shadow:neu-2></div>
-    </div>
-
-    <br />
-
-    <!-- ANCHOR use shadow id -->
-    <div class="list">
-      <div
-        v-for="(item, index) in items"
-        :key="index"
-        v-box-shadow="item.id"
-        class="list-item"
-        :class="{ 'no-name': !item.name }"
-      >
-        <small>id: {{ item.id }}</small>
-        <div>{{ item.name }}</div>
-      </div>
-    </div>
-  </div>
+<template lang="pug">
+div
+  //- ANCHOR use shadow name
+  .list
+    .list-item(v-box-shadow:l-4)
+    .list-item(v-box-shadow:ay-6)
+    .list-item(v-box-shadow:r-4)
+
+  br
+
+  //- ANCHOR use shadow id
+  .list
+    .list-item(
+      v-for="(item, index) in items"
+      :key="index"
+      v-box-shadow="item.id"
+      :class="{ 'no-name': !item.name }"
+    )
+      small id: {{ item.id }}
+      div {{ item.name }}
 </template>
 
 <script>
 import { collection } from "@/shadows";
 
 export default {
-  name: "Shadows",
+  name: "ListShadows",
   data: () => ({
     items: collection,
   }),
@@ -60,4 +57,4 @@ export default {
 .no-name {
   background-color: #e9b6cf;
 }
-</style>
+</style>