Dia 1 - Octubre 2024

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>