Dia 1 - Octubre 2024

Author: paulmelero

04-frameworks/03-vue/Dia_1/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.

04-frameworks/03-vue/Dia_1/components/Chat/TheChat.vue

@@ -0,0 +1,60 @@
+<template>
+  <section
+    class="grid grid-rows-[1fr,200px] h-full px-3 pt-3 pb-5 gap-4 overflow-hidden"
+  >
+    <output> </output>
+
+    <form @submit.prevent="onSubmit" class="flex justify-end gap-4">
+      <textarea
+        class="block w-full resize-none rounded-md p-2 bg-gray-700 border border-1 text-white"
+        @keydown="onKeyDown"
+        @keyup="onKeyUp"
+        autofocus
+        v-model="message"
+      ></textarea>
+      <button
+        class="rounded-md hover:bg-gray-700 hover:text-white p-3 self-end"
+      >
+        Send
+      </button>
+    </form>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+const message = ref('');
+
+const isShiftPressed = ref(false);
+
+const onKeyDown = (event: KeyBoardEvent) => {
+  if (event.key === 'Shift') {
+    isShiftPressed.value = true;
+  }
+};
+
+const onKeyUp = (event: KeyBoardEvent) => {
+  if (event.key === 'Shift') {
+    isShiftPressed.value = false;
+  }
+
+  if (event.key === 'Enter' && !isShiftPressed.value) {
+    onSubmit();
+
+    return;
+  }
+};
+
+const ai = useAI();
+
+const onSubmit = async () => {
+  console.log(message.value);
+  // loading state
+  // clear textarea
+  message.value = '';
+
+  const response = await ai.getCompletion(message.value);
+
+  console.log({ response });
+};
+</script>

04-frameworks/03-vue/Dia_1/components/TheNavigation.vue

@@ -0,0 +1,5 @@
+<template>
+  <nav class="border-b border-b-slate-300 p-3">
+    <nuxt-link to="/">Home</nuxt-link>
+  </nav>
+</template>

04-frameworks/03-vue/Dia_1/composables/useAI.ts

@@ -0,0 +1,14 @@
+import ollama from 'ollama';
+
+export default function useAI() {
+  const getCompletion = async (prompt: string) => {
+    const response = await ollama.chat({
+      model: 'llama3.1',
+      messages: [{ role: 'user', content: prompt }],
+    });
+
+    return response.message.content;
+  };
+
+  return { getCompletion };
+}

04-frameworks/03-vue/Dia_1/layouts/default.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <header>
+      <TheNavigation />
+    </header>
+    <main>
+      <slot />
+    </main>
+  </div>
+</template>

04-frameworks/03-vue/Dia_1/nuxt.config.ts

@@ -0,0 +1,6 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  compatibilityDate: '2024-04-03',
+  devtools: { enabled: true },
+  modules: ['@nuxtjs/tailwindcss'],
+});

04-frameworks/03-vue/Dia_1/package.json

@@ -0,0 +1,21 @@
+{
+  "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",
+    "ollama": "^0.5.9",
+    "vue": "latest",
+    "vue-router": "latest"
+  },
+  "devDependencies": {
+    "@nuxtjs/tailwindcss": "^6.12.2"
+  }
+}

04-frameworks/03-vue/Dia_1/pages/about.vue

@@ -0,0 +1 @@
+<template>About</template>

04-frameworks/03-vue/Dia_1/pages/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <h1>Welcome!</h1>
+
+  <ChatTheChat />
+</template>