Add files via upload

BACA.txt

@@ -0,0 +1,27 @@
+playlist belum:
+https://www.youtube.com/playlist?list=PL-lxoPS_1OXUimhJugWZ4bLeno-SWHqA_
+
+materi: https://www.youtube.com/watch?v=1yGof4OTDtY
+isi: vuetify3 + Nuxt3 
+1.npx nuxi init .
+2.npm i
+3. npm run dev
+4.npm i vuetify@next
+5. npm i -D sass nuxt-icon @nuxtjs/google-fonts@prerelease
+6. npm i vite-plugin-vuetify
+7. npm run postinstall (jika sudah tambahkan modules di file nuxt.config.ts)
+8.
+menit= 49:06 belum
+
+error:
+button toggle thema tidak bisa berubah warna hijau
+icon error (47:12)
+vdatatable error (48:00)
+
+
+color= https://tailwindcss.com/docs/customizing-colors
+icon= https://icones.netlify.app/collection/ph
+IconAliases = https://github.com/BayBreezy/nuxt3-vuetify3-starter/blob/main/utils/customIcons.ts
+
+extension yg perlu di install:
+Iconify IntelliSense 

README.md

@@ -0,0 +1,75 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app.vue

@@ -0,0 +1,145 @@
+<template>
+  <div>
+    <v-app>
+      <v-app-bar>
+        <v-app-bar-title>Hello</v-app-bar-title>
+        <v-spacer/>
+        <v-btn @click="toggleTheme">
+          <!-- <v-icon>ph:sun</v-icon> -->
+          toggle thema</v-btn>
+      </v-app-bar>
+      <v-main>
+        <v-container>
+          <v-text-field class="mb-5" label="Name" type="name"/>
+          <v-card
+    title="Nutrition"
+    flat
+  >
+    <template v-slot:text>
+      <v-text-field
+        v-model="search"
+        label="Search"
+        
+        variant="outlined"
+        hide-details
+        single-line
+      ></v-text-field>
+    </template>
+
+    <v-data-table
+      :headers="headers"
+      :items="desserts"
+      :search="search"
+    ></v-data-table>
+  </v-card>
+        </v-container>
+      </v-main>
+    </v-app>
+  </div>
+</template>
+<script setup>
+import { useTheme } from "vuetify";
+const theme = useTheme();
+
+const toggleTheme = () => {
+  theme.global.name.value = theme.global.current.value.dark ? 'light' : 'myTheme';
+};
+
+// const itemsPerPage= 5;
+const search= '';
+const headers= [
+          {
+            align: 'start',
+            key: 'name',
+            sortable: false,
+            title: 'Dessert (100g serving)',
+          },
+          { key: 'calories', title: 'Calories' },
+          { key: 'fat', title: 'Fat (g)' },
+          { key: 'carbs', title: 'Carbs (g)' },
+          { key: 'protein', title: 'Protein (g)' },
+          { key: 'iron', title: 'Iron (%)' },
+        ];
+const desserts= [
+          {
+            name: 'Frozen Yogurt',
+            calories: 159,
+            fat: 6.0,
+            carbs: 24,
+            protein: 4.0,
+            iron: 1,
+          },
+          {
+            name: 'Ice cream sandwich',
+            calories: 237,
+            fat: 9.0,
+            carbs: 37,
+            protein: 4.3,
+            iron: 1,
+          },
+          {
+            name: 'Eclair',
+            calories: 262,
+            fat: 16.0,
+            carbs: 23,
+            protein: 6.0,
+            iron: 7,
+          },
+          {
+            name: 'Cupcake',
+            calories: 305,
+            fat: 3.7,
+            carbs: 67,
+            protein: 4.3,
+            iron: 8,
+          },
+          {
+            name: 'Gingerbread',
+            calories: 356,
+            fat: 16.0,
+            carbs: 49,
+            protein: 3.9,
+            iron: 16,
+          },
+          {
+            name: 'Jelly bean',
+            calories: 375,
+            fat: 0.0,
+            carbs: 94,
+            protein: 0.0,
+            iron: 0,
+          },
+          {
+            name: 'Lollipop',
+            calories: 392,
+            fat: 0.2,
+            carbs: 98,
+            protein: 0,
+            iron: 2,
+          },
+          {
+            name: 'Honeycomb',
+            calories: 408,
+            fat: 3.2,
+            carbs: 87,
+            protein: 6.5,
+            iron: 45,
+          },
+          {
+            name: 'Donut',
+            calories: 452,
+            fat: 25.0,
+            carbs: 51,
+            protein: 4.9,
+            iron: 22,
+          },
+          {
+            name: 'KitKat',
+            calories: 518,
+            fat: 26.0,
+            carbs: 65,
+            protein: 7,
+            iron: 6,
+          },
+        ];
+</script>

app_error.vue

@@ -0,0 +1,131 @@
+<template>
+    <div>
+      <v-app>
+        <v-app-bar>
+          <v-app-bar-title>Hello</v-app-bar-title>
+          <v-spacer/>
+          <v-btn @click="toggleTheme">
+            <!-- <v-icon>ph:sun</v-icon> -->
+            toggle thema</v-btn>
+        </v-app-bar>
+        <v-main>
+          <v-container>
+            <v-text-field class="mb-5" label="Name" type="name"/>
+            <v-data-table-server
+      v-model:items-per-page="itemsPerPage"
+      :headers="headers"
+      :items="desserts"
+      item-value="name"
+      class="elevation-1"
+    ></v-data-table-server>
+          </v-container>
+        </v-main>
+      </v-app>
+    </div>
+  </template>
+  <script setup>
+  import { useTheme } from "vuetify";
+  const theme = useTheme();
+  
+  const toggleTheme = () => {
+    theme.global.name.value = theme.global.current.value.dark ? 'light' : 'myTheme';
+  };
+  
+  const itemsPerPage= 5;
+  const headers= [
+          {
+            title: 'Dessert (100g serving)',
+            align: 'start',
+            sortable: false,
+            key: 'name',
+          },
+          { title: 'Calories', key: 'calories', align: 'end' },
+          { title: 'Fat (g)', key: 'fat', align: 'end' },
+          { title: 'Carbs (g)', key: 'carbs', align: 'end' },
+          { title: 'Protein (g)', key: 'protein', align: 'end' },
+          { title: 'Iron (%)', key: 'iron', align: 'end' },
+        ];
+  const desserts = [
+      {
+        name: 'Frozen Yogurt',
+        calories: 159,
+        fat: 6.0,
+        carbs: 24,
+        protein: 4.0,
+        iron: '1',
+      },
+      {
+        name: 'Jelly bean',
+        calories: 375,
+        fat: 0.0,
+        carbs: 94,
+        protein: 0.0,
+        iron: '0',
+      },
+      {
+        name: 'KitKat',
+        calories: 518,
+        fat: 26.0,
+        carbs: 65,
+        protein: 7,
+        iron: '6',
+      },
+      {
+        name: 'Eclair',
+        calories: 262,
+        fat: 16.0,
+        carbs: 23,
+        protein: 6.0,
+        iron: '7',
+      },
+      {
+        name: 'Gingerbread',
+        calories: 356,
+        fat: 16.0,
+        carbs: 49,
+        protein: 3.9,
+        iron: '16',
+      },
+      {
+        name: 'Ice cream sandwich',
+        calories: 237,
+        fat: 9.0,
+        carbs: 37,
+        protein: 4.3,
+        iron: '1',
+      },
+      {
+        name: 'Lollipop',
+        calories: 392,
+        fat: 0.2,
+        carbs: 98,
+        protein: 0,
+        iron: '2',
+      },
+      {
+        name: 'Cupcake',
+        calories: 305,
+        fat: 3.7,
+        carbs: 67,
+        protein: 4.3,
+        iron: '8',
+      },
+      {
+        name: 'Honeycomb',
+        calories: 408,
+        fat: 3.2,
+        carbs: 87,
+        protein: 6.5,
+        iron: '45',
+      },
+      {
+        name: 'Donut',
+        calories: 452,
+        fat: 25.0,
+        carbs: 51,
+        protein: 4.9,
+        iron: '22',
+      },
+    ];
+  </script>
+  

assets/settings.scss

@@ -0,0 +1,5 @@
+$family: "Poppins",sans-serif;
+@use 'vuetify/settings' with(
+    $body-font-family:$family,
+    $field-border-radius:7px
+);

nuxt.config.ts

@@ -0,0 +1,30 @@
+import vuetify from 'vite-plugin-vuetify';
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  modules:[
+    "nuxt-icon",
+    "@nuxtjs/google-fonts",
+    async (options, nuxt) => {
+      nuxt.hooks.hook('vite:extendConfig', config => config.plugins.push(
+        vuetify({
+          styles: {configFile:"assets/settings.scss"},
+        })
+      ))
+    },
+  ],
+
+  css: ["vuetify/styles"],
+  typescript:{shim:false},
+  build: {transpile: ["vuetify"]},
+  vite:{ssr:{noExternal: ["vuetify"]}},
+
+  googleFonts: { //menambahkan jenis font Poppins
+    families: {
+      Poppins:[100,200,300,400,500,600,700,800,900] //weight yg mau diambil
+    },
+    download:false,
+    useStylesheet:true,
+  },
+
+  compatibilityDate: "2024-09-09",
+});

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "nuxt": "^3.13.0",
+    "vite-plugin-vuetify": "^2.0.4",
+    "vue": "latest",
+    "vuetify": "^3.7.0-beta.1",
+    "vuetify-nuxt-module": "^0.18.2"
+  },
+  "devDependencies": {
+    "@nuxt/icon": "^1.5.1",
+    "@nuxtjs/google-fonts": "^3.0.0-1",
+    "nuxt-icon": "^1.0.0-beta.7",
+    "sass-embedded": "^1.78.0"
+  }
+}

plugins/vuetify.ts

@@ -0,0 +1,41 @@
+import { createApp } from 'vue';
+import { createVuetify, ThemeDefinition } from "vuetify";
+import { md2 } from 'vuetify/blueprints';
+// import { VDataTable } from 'vuetify/labs/VDataTable'
+
+const myTheme: ThemeDefinition = {//untuk mengatur tema terang atau gelap
+    dark:true,
+    colors:{
+       primary:"#3b82f6", 
+    }
+}
+
+export default defineNuxtPlugin((app) => {
+
+    const vuetify = createVuetify({
+        ssr: true,
+        blueprint: md2,
+        // components:{VDataTable},
+        defaults:{
+            VTextField:{
+                variant:"outlined",
+                color:"primary",
+            },
+        },
+        theme:{
+            defaultTheme: "myTheme",
+            themes:{
+                myTheme,
+            },
+        },
+        icons:{
+            defaultSet: 'custom',
+            sets:{
+                custom
+            },
+            aliases,
+        }
+    });
+
+    app.vueApp.use(vuetify);
+});

public/robots.txt

@@ -0,0 +1 @@
+

server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}

utils/icons.ts

@@ -0,0 +1,54 @@
+import { h } from 'vue'
+import type { IconSet, IconAliases, IconProps } from 'vuetify'
+
+import {Icon} from "#components";
+
+const aliases: IconAliases = {
+    collapse: "ph:caret-up",
+    complete: "ph:check",
+    cancel: "ph:x-circle",
+    close: "ph:x",
+    delete: "ph:trash",
+    clear: "ph:x-circle",
+    success: "ph:check-circle",
+    info: "ph:info",
+    warning: "ph:warning",
+    error: "ph:x-circle",
+    prev: "ph:caret-left",
+    next: "ph:caret-right",
+    checkboxOn: "ph:check-square-fill",
+    checkboxOff: "ph:square",
+    checkboxIndeterminate: "ph:square-logo-fill",
+    delimiter: "ph:circle-fill",
+    sort: "ph:arrows-down-up-fill",
+    expand: "ph:caret-down",
+    menu: "ph:list",
+    subgroup: "ph:caret-down-fill",
+    dropdown: "ph:caret-down-fill",
+    radioOn: "ph:radio-button-fill",
+    radioOff: "ph:circle",
+    edit: "ph:note-pencil",
+    ratingEmpty: "ph:star",
+    ratingFull: "ph:star-fill",
+    ratingHalf: "ph:star-half-fill",
+    loading: "ph:spinner",
+    first: "ph:caret-double-left-duotone",
+    last: "ph:caret-double-right-duotone",
+    unfold: "ph:arrows-down-up",
+    file: "ph:paperclip",
+    plus: "ph:plus",
+    minus: "ph:minus",
+    sortAsc: "ph:sort-ascending",
+    sortDesc: "ph:sort-descending",
+    calendar: "ph:calendar",
+  };
+
+const custom: IconSet = {
+  component: (props: IconProps) => h(Icon,{
+    name: props.icon,
+    tag: props.tag,
+    disabled: props.disabled
+  }),
+}
+
+export { aliases, custom };