use env

src/App.vue

@@ -2,51 +2,44 @@
   <div id="app">
     <div class="container">
       <h1 class="message">
-        Box-shadows.css
-        <strong>for <span style="color: #42d392">Vue</span></strong>
+        {{ package.title }}
+        <strong>for <span>Vue</span></strong>
       </h1>
       <p>
-        Add beautiful shadow effects to your project without thinking about CSS.
+        {{ package.desc }}
       </p>
-
-      <div class="list-item" v-box-shadow:neu-2></div>
-
-      <br />
-
-      <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>
+      <ListShadows />
     </div>
   </div>
 </template>
 
 <script>
-import { collection } from "./shadows";
+import ListShadows from "@/components/ListShadows";
 
 export default {
   name: "App",
-  data: () => ({
-    items: collection,
-  }),
+  components: {
+    ListShadows,
+  },
+  computed: {
+    package() {
+      return {
+        title: process.env.VUE_APP_TITLE,
+        desc: process.env.VUE_APP_DESCRIPTION,
+      };
+    },
+  },
 };
 </script>
 
 <style>
 :root {
   --base-size: 0.25rem;
   --body-text-color: #1f2229;
-  --body-background: #eceef7; /* #fff; */
+  --body-background: #eceef7;
   --card-border-color: #abc6d034;
-  --card-background: #eceef7; /* #eceef7; */
+  --card-background: #eceef7;
+  --vue-color: #42d392;
 }
 
 *,
@@ -73,29 +66,7 @@ body {
   margin-bottom: 1rem;
 }
 
-.list {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 8vw;
-  place-items: center;
-  text-align: center;
-}
-
-.list-item {
-  display: grid;
-  width: 240px;
-  height: 240px;
-  place-content: center;
-  /* border: 0.75rem solid var(--card-background); */
-  /* border-radius: 50%; */
-  background-color: var(--card-background);
-}
-
-.list-item small {
-  opacity: 0.4;
-}
-
-.no-name {
-  background-color: #e9b6cf;
+.message span {
+  color: var(--vue-color);
 }
 </style>

src/components/ListShadows.vue

@@ -0,0 +1,63 @@
+<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>
+
+<script>
+import { collection } from "@/shadows";
+
+export default {
+  name: "Shadows",
+  data: () => ({
+    items: collection,
+  }),
+};
+</script>
+
+<style scoped>
+.list {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 8vw;
+  place-items: center;
+  text-align: center;
+}
+
+.list-item {
+  display: grid;
+  width: 240px;
+  height: 240px;
+  place-content: center;
+  /* border: 0.75rem solid var(--card-background); */
+  /* border-radius: 50%; */
+  background-color: var(--card-background);
+}
+
+.list-item small {
+  opacity: 0.4;
+}
+
+.no-name {
+  background-color: #e9b6cf;
+}
+</style>