Archives des Web - dbi Blog

AI Isn’t Your Architect: Real-World Issues in a Vue project

Nicolas Meunier — Mon, 15 Dec 2025 12:37:57 +0000

In my previous article I generated a Rest NestJS API using AI.
Today, I will create a small UI to authenticate users via the API. I will use this simple case to show the limits of coding with AI and what you need to be attentive to.

I will create my interface with Vue 3 and Vuetify still using the GitHub Copilot agent on Vs Code.

Initializing the project

I create the new Vuetify project with the npm command:

npm create vuetify@latest

To avoid CORS request between the Vuetify project and the API project, I’m configuring a proxy into Vite like in my other article.

In the AI chat, I also initialize my context

Remember:
- You are a full-stack TypeScript developer.
- You follow best practices in development and security.
- You will work on this NestJS project.

To guide the AI, I’m exporting the Open API definition into a file in my project: /api-docs/open-api.json

Connecting to API, first issue

First, I want to connect my UI to the API, and I ask the AI the following:

Connect the application to the API. The API url path is /api

The result is not what I expected… My goal was to generate a simple class that makes requests to API with support for JWT tokens, but by default the AI wanted to add the Axios library to the project.

I’m not saying that Axios is a bad library, but it’s far too complicated for my usage and will add too many dependencies to the project, and therefore more maintenance.

So I’m skipping the installation of the library and I’m stopping the AI agent.

To continue and generate the desired code, I ask the AI:

I don't want to use axios, connect the application to the API with native typescript code

With this prompt, the generated code is fine.

Authentication Service, hidden issue

Without going into the details, I asked the AI to create my authentication form and the associated service:

Add a page /login to authenticate users, Use vuetify for login form.
Add a service to authenticate the users using the api endpoint /auth/login
The api return jwt token.
When the user is authenticated, redirect the user to /home
If a user accesses /index without authentication redirect the user to /login

The result looks good and works:

At first glance, the code works and I can authenticate myself. But the problem comes from the code itself:

The localStorage is accessible by all scripts, thus vulnerable to XSS attacks.

JWT access tokens should not be stored in persistent storage accessible by JavaScript, such as localStorage. To reduce the risk of XSS attacks, it is preferable to store the access token in a Vue service variable rather than in persistent browser storage.

Note: When stored in memory, the token will be lost at every page refresh, which requires implementing a refresh token mechanism. The refresh token should be stored in an HttpOnly cookie, allowing the access token to have a short expiration time and significantly limiting the impact of a potential attack.

To solve the issue I asked the AI the following:

Don't use localStorage to store the token, it's a security issue

Using GPT5-min, it only does the work:

With Claude Haiku 4.5, we have a short notice:

Why does this happen?

I tried different AI models in GitHub Copilot, but, from GPT to Claude, the result was similar. Most AIs generate code with Axios and localStorage for this use, because they replicate the most common patterns found in their training data, not the most up-to-date or secure practices.

Axios is overrepresented in tutorials because it offers a simple, opinionated HTTP abstraction that is easier for an AI to reason about than the lower-level fetch API.

The storage of JWT in localStorage is still widely shown online as it reflects old frontend authentication practices that prioritized simplicity over security. It keeps the token easily accessible to JavaScript and avoids the processing of cookies and refresh token rotation. Although largely discouraged today, these examples remain overrepresented in the tutorials and training data used by AI models.

In short, AI prioritizes widely recognized patterns and simplicity of implementation over minimalism and real-world security considerations.

Conclusion

Although AI is an incredible tool that helps us in our development work, it is important to understand the limits of this tool. With AI, the new role of developers is to imagine the code architecture, ask AI, evaluate the result and review the code. As its name indicates very well, “Copilot” is your co-pilot, you must remain the pilot.

AI can write code, but it does not understand the consequences of architectural decisions.

L’article AI Isn’t Your Architect: Real-World Issues in a Vue project est apparu en premier sur dbi Blog.

How effective is AI on a development project?

Nicolas Meunier — Fri, 12 Dec 2025 07:49:18 +0000

In this article, I will try to evaluate the benefits of AI on a development project and what concrete changes it makes to our development practices.

The test case and the approach

I chose a familiar environment for my comparison: a new NestJS project from scratch.

For my project, I want to:

Use a .env file for configuration
Connect to a PostgreSQL database
Store users in a database table
Create a CRUD API to manage my users
Manage JWT authentication based on my user list
Secure CRUD routes for authenticated users using a guard

To help me, I’m going to use the GitHub Copilot agent with the GTP5-mini model. I’ll ask it to generate code on my behalf, as much as possible. However, I’ll continue to follow NestJS best practices by using the documentation recommendations and initializing the project myself. I will focus on prompting, initializing the context and reviewing the code generated by the AI.

For better results, I will develop the application step by step and control the generated code at each step.

Intialize the project

At first, I initialize a new NestJS project using the CLI, as mentioned in the documentation:

npm i -g @nestjs/cli
nest new nestjs-project

First contact with the AI agent

I start by opening the project in VSCode and I open a new chat with the AI agent. I’m trying to give it some general instructions for the rest of the tasks:

Remember:
- You are a full-stack TypeScript developer.
- You follow best practices in development and security.
- You will be working on this NestJS project.

The AI agent discovers the project:

First Task, add application configuration

I followed the documentation to add configuration support using .env files

I’ve manually added the required package:

npm i --save @nestjs/config

And asked the AI to generate the code:

@nestjs/config is installed. Add support for .env in the application. The config file must contain the credentials to access to the database (host, database name, user, password).

Second Task, connect to the database and create the users table

I want to use TypeORM to manage my database connections and migrations.

First, I install the required packages:

npm install --save @nestjs/typeorm typeorm pg

And then ask the AI agent to generate the code:

I will use typeorm and postgres. Connect the application to the database.
Save the credentials in the .env file.
Use the credentials:
- host: localhost
- name: nestjs, 
- user: nest-user 
- password XXX

Note : Be careful when you send credentials to AI

Next request to the AI agent: create a migration to initialize the database schema:

Add a migration to create a "users" table with the following fields: id (primary key), username (string), email (string), password (string), is_admin (boolean), disabled (boolean), created_at (timestamp), updated_at (timestamp).

In addition, in my package.json, the agent adds the migration command to npm in the project:

  "typeorm:migration:run": "ts-node -r tsconfig-paths/register ./node_modules/typeorm/cli.js migration:run -d ./data-source.ts",

To simplify the process, I asked the AI agent to generate a default user for my application:

In the migration, add a default admin user with the following values:
    username: "admin"
    email: "admin@example.com"
    password: "Admin@123" (hash the password using bcrypt)
    is_admin: true
    disabled: false

After the completion by the AI agent, I run the migration.

First module, service and controller for users with CRUD endpoints

Now, I ask the agent to create the users module with detailed endpoints:

Add a module, service, and controller for "users" with the following endpoints:
- GET /users: Retrieve a list of all users.
- GET /users/:id: Retrieve a user by ID.
- POST /users: Create a new user.
- PUT /users/:id: Update a user by ID.
- DELETE /users/:id: Delete a user by ID.

This step is very quick, and the code is generated in 4min only !

Add Swagger documentation

To test the first REST module, I ask the AI to add Swagger UI to the project.

As with the other steps, I add the packages myself:

npm install --save @nestjs/swagger

Note: This step is very tricky for the AI, if you don’t specify the already installed package, it will try to install an outdated version.

Then, I ask the AI agent to generate the code:

@nestjs/swagger is installed
Add swagger to the application. 
Document the users endpoints.

In few minutes, we have the API documentation:

During API testing, I noticed that the password hash was returned in the user list. However, initially, I had instructed the AI to follow security best practices…

I asked the AI agent to fix this issue:

The users password field must be excluded from the responses.

Last task, add JWT authentication

As authentication mechanism, I use JWT tokens provided by passport library.

I install the required packages:

npm install --save @nestjs/passport
npm install --save @nestjs/jwt passport-jwt
npm install --save-dev @types/passport-jwt

Then, I ask the AI agent to generate the code:

Implement the JWT authentication strategy, @nestjs/jwt passport-jwt and @types/passport-jwt are installed.
Add a login endpoint that returns a JWT token when provided with valid user credentials (username and password from the users table).

And I instruct the AI to use .env file for the JWT secret and expiration:

Add the JWT secrets and expiration into the .env file, Fix the typescript errors, Improve the swagger documentation for login endpoint (message definition)

Now, I want to secure the users endpoints to allow only authenticated users and ask the agent the following:

Add a guard on the users endpoints to allow only connected users

Last point, I want to be able to authenticate on the Swagger interface, so I ask it:

Add the ability to authenticate on the Swagger interface with a bearer token.

Conclusion

All of this took me around 1h30 to complete, including prompting and reviewing the steps.

Reading the documentation, understanding the technologies, adding the dependancies remained the same.

The initial estimate, without AI, was between 2 and 4 hours to complete the project :

Task	Estimated Time	AI Coding / prompting	Review
.env	15–30 min	6 min	5 min
Connexion PostgreSQL	20–40 min	4 min	2 min
Table User + migration	15–25 min	7 min	2 min
CRUD Users	30–45 min	5 min	10 min
Swagger UI	15–30 min	6 min	6 min
Auth JWT	30–60 min	12 min	15 min
Guards	15–30 min	5 min	5 min
TOTAL	2h20 – 4h20	45min	45 min

During development, AI makes certain errors or inaccuracies like TypeScripts compilation errors, password or security issues such as returning the password hash in the user list. However, the time spent to review and correct these issues is largely compensated by the speed of code generation.

At the end, coding with AI is very fast, the generated code with a well documented technology (NestJS) is good.

Even if formulating a clear request requires careful consideration and wording, coding is comfortable. However, the job is no longer the same; it now requires good code planning and architecture and the ability to review the generated code. Coding with AI can be effective, but only if you have a clear idea of what you want from the very beginning, use clear instructions and leave no room for interpretation by the AI.

L’article How effective is AI on a development project? est apparu en premier sur dbi Blog.

Avoid CORS requests in development mode with Vite

Nicolas Meunier — Wed, 26 Nov 2025 16:49:31 +0000

When developing a modern web application, it’s common to use a frontend (Vue, React) that communicates with a backend (Nest.js) via REST APIs. Often, the two projects live in parallel, requiring them to be run in development mode. Without specific configuration, API calls between the frontend and backend will be blocked.

In my case, with a frontend in Vue 3 and NestJS as backend, as small Vite configuration helps to overcome the problem in local development.

Configuration of the Vue 3 frontend (Vite)

Important point, the two technologies used for my project are based on Vite. As a result, by default, both projects try to use port 3000 in development mode. First, I have to change the port used by Vite in the Vue project (the frontend) to a new one (port 4200 in my case).

// vite.config.js
export default defineConfig({
  // all the config...
  server: {
    port: 4200, // new custom port for development
  }
})

The CORS request problem

Now the two projects can run at the same time without port conflicts. The NestJS backend run on the default port (localhost:3000) and the Vue frontend on the newly defined one (localhost:4200), but the problem isn’t solved yet. The API calls from the frontend to the backend generate errors like this :

Access to fetch at 'http://localhost:3000/status' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

This error is due to security rules on the browser. Without cross-origin configuration on the server, it’s not possible to fetch url with different domain, protocol or port.

One solution is to enable CORS on the backend server, but this solution requires to add some code at server side to manage a configuration that is not required in production. Indeed, it’s never a good idea to have a specific behavior only for development use cases.

Solution with Vite

The solution is very simple with the proxy feature in the Vite development server: Vite is capable of proxifying the API and avoid CORS requests to be sent to the backend. To do that, I’ve added another piece of configuration to the frontend vite.config.js file:

// vite.config.js
export default defineConfig({
  // others configurations...
  server: {
    port: 4200, // frontend port
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // NestJS backend address
        changeOrigin: true,
      }
    }
  }
})

With this config all trafic to “http://localhost:4200/api/…” will be proxified to “http://localhost:3000/api/…”.

As a result, all requests come from the same origin (localhost:4200) and no CORS errors are thrown by the browser.

L’article Avoid CORS requests in development mode with Vite est apparu en premier sur dbi Blog.

How to add Column Filtering to Vuetify Data Table

Joan Frey — Mon, 25 Aug 2025 19:22:27 +0000

For a long time, my v-data-table-server implementation in the YaK only supported global search through a simple text input. While it was good enough for basic queries, I needed something more powerful—the ability to filter by individual columns using custom operators.

Here’s a walkthrough of how I added column filters with v-select and v-text-field embedded in v-menu components right inside the table headers.

The Problem

My users wanted to search not just by a global term but with more granularity—for example:

Show only items where provider contains “aws”
Filter out items with a specific state
View all entries with a name that contains “master”

The default Vuetify Data Table doesn’t support per-column filtering out of the box, so I needed to get creative, even if you can override the default filtering used with the search prop.

The Approach

Attach filter UI elements to each column header
Bind filters to a filters object keyed by column title
Apply the filters to the data using a computed property
Change the icon and icon color on the header to indicate active filters

I. Injecting the Filter UI into Headers

In the v-slot:[header.key], I added a v-menu that displays a filter operator dropdown and a text input:

Each filter’s state is stored in a reactive object:

const filters = ref>({});

II. Initializing Filters for Each Column

Once I loaded the table headers, I made sure to initialize the corresponding filters:

dataHeaders.value.forEach((header) => {
    if (!filters.value[header.title]) {
        filters.value[header.title] = { value: "", operator: "=" };
     }
});

This ensured every column could be filtered independently and to avoid errors related to empty/null data.

III. Applying the Filters to the Data

I used a computed property to transform the data on the fly:

const filteredData = computed(() => {
  return recordData.value.filter((item) => {
    return Object.entries(filters.value).every(([filterKey, filter]) => {
      if (!filter.value) return true;

      const matchingKey = Object.keys(item).find((key) => {
        const normalizedFilterKey = filterKey.toLowerCase();
        return key.toLowerCase() === normalizedFilterKey ||
               key.toLowerCase().endsWith("name") &&
               key.toLowerCase().startsWith(normalizedFilterKey);
      });

      if (!matchingKey) return true;

      const itemValue = String(item[matchingKey] || "").toLowerCase();
      const filterValue = filter.value.toLowerCase();

      return filter.operator === "="
        ? itemValue.includes(filterValue)
        : !itemValue.includes(filterValue);
    });
  });
});

This filtering happens client-side after the data is fetched.

IV. Adding UX Details

A few extra things I did for better UX:

Colored icons: A regular filter icon shows when a filter is active.
Clear filters button (optional): Could be added for each column.
Auto-focus: Focuses on the text field when the menu opens.

What’s Next?

After adding this new feature, the sort indicator next to each column header disappeared—although sorting still works as expected. I haven’t had time to look into it yet, but I’d like to find a solution. If you happen to figure it out, feel free to share it in the comments!

Where to find the complete code ?

You can check out the complete and latest code in the open-source project on GitLab:
👉 https://gitlab.com/yak4all/yak_frontend/yak_ui
The relevant logic lives in the YakGrid.vue component.

Conclusion

By embedding filter controls directly into column headers and managing state reactively, I was able to turn a basic Vuetify data table into a much more powerful data exploration tool.

Let me know if you try this pattern or come up with improvements—I’m always up for iterating! You can also suggest changes or contribute directly on the GitLab repo of the Yak project.

L’article How to add Column Filtering to Vuetify Data Table est apparu en premier sur dbi Blog.

Getting started with Open WebUI

Daniel Westermann — Fri, 11 Apr 2025 06:25:24 +0000

Everybody is talking about AI, RAG and language models today. A lot of people are using ChatGPT or other tools to get answers to their questions, generate text or images. While this sometimes is really helpful (depending on how you use it) you still need to be skeptical about the information you get out of those tools. To understand how those tools work, you need to touch and work with them. In this post we’ll take a look at Open WebUI, which is an open source “user-friendly self-hosted AI platform designed to operate entirely offline”.

Before we can setup Open WebUI we need a large language model, and one of the popular frameworks is Ollama. Getting this up and running as quite easy and we’ll start from a Debian 12 minimal installation:

root@ip-10-0-1-112:~$ cat /etc/debian_version 
12.10

The installation is actually a one-liner, and all you have to do is this:

root@ip-10-0-1-112:~$ curl -fsSL https://ollama.com/install.sh | sh
>>> Installing ollama to /usr/local
>>> Downloading Linux amd64 bundle
######################################################################## 100.0%
>>> Creating ollama user...
>>> Adding ollama user to render group...
>>> Adding ollama user to video group...
>>> Adding current user to ollama group...
>>> Creating ollama systemd service...
>>> Enabling and starting ollama service...
Created symlink /etc/systemd/system/default.target.wants/ollama.service → /etc/systemd/system/ollama.service.
>>> The Ollama API is now available at 127.0.0.1:11434.
>>> Install complete. Run "ollama" from the command line.
WARNING: No NVIDIA/AMD GPU detected. Ollama will run in CPU-only mode.

This created a new operating system user and started a new process:

root@ip-10-0-1-112:~$ grep ollama /etc/passwd
ollama:x:999:994::/usr/share/ollama:/bin/false
root@ip-10-0-1-112:~$ ps -ef | grep ollama
ollama      1194       1  0 05:01 ?        00:00:00 /usr/local/bin/ollama serve
root        1205     606  0 05:01 pts/1    00:00:00 grep ollama
root@ip-10-0-1-112:~$ systemctl list-unit-files | grep ollama
ollama.service                         enabled         enabled

From now on you already can run the model and start asking questions:

root@ip-10-0-1-112:~$ ollama run llama3.2
>>> Who am I?
I'd love to try and figure out who you are, but I need a bit more information. You see, there are many people with different names, backgrounds, and characteristics, so it's not always possible to pinpoint exactly who someone is.

Can you give me some clues or hints about yourself? For example:

* What do you like doing in your free time?
* Do you have any unique talents or skills?
* Are you a fan of any particular sports teams, movies, or TV shows?
* Do you have any fun facts or accomplishments that might help me get to know you better?

The more information you share, the better I'll be able to try and guess who you are!

>>> Send a message (/? for help)

As we want a graphical user interface over this, we can now go ahead an install Open WebUI. This is quite easy as well. We’ll use a Python virtual environment for this:

root@ip-10-0-1-112:~$ apt install -y pip python3-venv
root@ip-10-0-1-112:~$ groupadd openwebui
root@ip-10-0-1-112:~$ useradd -g openwebui -m -s /bin/bash openwebui
root@ip-10-0-1-112:~$ su - openwebui
openwebui@ip-10-0-1-112:~$ python3 -m venv .local
openwebui@ip-10-0-1-112:~$ .local/bin/pip install open-webui
Collecting open-webui
  Downloading open_webui-0.6.2-py3-none-any.whl (132.7 MB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 132.7/132.7 MB 18.7 MB/s eta 0:00:00
Collecting accelerate
  Downloading accelerate-1.6.0-py3-none-any.whl (354 kB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 354.7/354.7 kB 27.4 MB/s eta 0:00:00
Collecting aiocache
  Downloading aiocache-0.12.3-py2.py3-none-any.whl (28 kB)
Collecting aiofiles
  Downloading aiofiles-24.1.0-py3-none-any.whl (15 kB)
Collecting aiohttp==3.11.11
...
Successfully installed Events-0.5 Jinja2-3.1.6 Mako-1.3.10 MarkupSafe-3.0.2 PyYAML-6.0.2 RTFDE-0.1.2 Shapely-2.1.0 XlsxWriter-3.2.2 accelerate-1.6.0 aiocache-0.12.3 aiofiles-24.1.0 aiohappyeyeballs-2.6.1 aiohttp-3.11.11 aiosignal-1.3.2 alembic-1.14.0 annotated-types-0.7.0 anthropic-0.49.0 anyio-4.9.0 appdirs-1.4.4 apscheduler-3.10.4 argon2-cffi-23.1.0 argon2-cffi-bindings-21.2.0 asgiref-3.8.1 async-timeout-5.0.1 attrs-25.3.0 authlib-1.4.1 av-14.3.0 azure-ai-documentintelligence-1.0.0 azure-core-1.33.0 azure-identity-1.20.0 azure-storage-blob-12.24.1 backoff-2.2.1 bcrypt-4.3.0 beautifulsoup4-4.13.3 bidict-0.23.1 bitarray-3.3.1 black-25.1.0 blinker-1.9.0 boto3-1.35.53 botocore-1.35.99 build-1.2.2.post1 cachetools-5.5.2 certifi-2025.1.31 cffi-1.17.1 chardet-5.2.0 charset-normalizer-3.4.1 chroma-hnswlib-0.7.6 chromadb-0.6.2 click-8.1.8 colbert-ai-0.2.21 colorclass-2.2.2 coloredlogs-15.0.1 compressed-rtf-1.0.7 cryptography-44.0.2 ctranslate2-4.6.0 dataclasses-json-0.6.7 datasets-3.5.0 defusedxml-0.7.1 deprecated-1.2.18 dill-0.3.8 distro-1.9.0 dnspython-2.7.0 docker-7.1.0 docx2txt-0.8 duckduckgo-search-7.3.2 durationpy-0.9 easygui-0.98.3 ebcdic-1.1.1 ecdsa-0.19.1 einops-0.8.1 elastic-transport-8.17.1 elasticsearch-8.17.1 emoji-2.14.1 et-xmlfile-2.0.0 eval-type-backport-0.2.2 extract-msg-0.54.1 fake-useragent-2.1.0 fastapi-0.115.7 faster-whisper-1.1.1 filelock-3.18.0 filetype-1.2.0 firecrawl-py-1.12.0 flask-3.1.0 flatbuffers-25.2.10 fonttools-4.57.0 fpdf2-2.8.2 frozenlist-1.5.0 fs-2.4.16 fsspec-2024.12.0 ftfy-6.2.3 gcp-storage-emulator-2024.8.3 git-python-1.0.3 gitdb-4.0.12 gitpython-3.1.44 google-ai-generativelanguage-0.6.15 google-api-core-2.24.2 google-api-python-client-2.166.0 google-auth-2.38.0 google-auth-httplib2-0.2.0 google-auth-oauthlib-1.2.1 google-cloud-core-2.4.3 google-cloud-storage-2.19.0 google-crc32c-1.7.1 google-generativeai-0.8.4 google-resumable-media-2.7.2 googleapis-common-protos-1.63.2 greenlet-3.1.1 grpcio-1.67.1 grpcio-status-1.67.1 grpcio-tools-1.67.1 h11-0.14.0 h2-4.2.0 hpack-4.1.0 html5lib-1.1 httpcore-1.0.7 httplib2-0.22.0 httptools-0.6.4 httpx-0.28.1 httpx-sse-0.4.0 huggingface-hub-0.30.2 humanfriendly-10.0 hyperframe-6.1.0 idna-3.10 importlib-metadata-8.6.1 importlib-resources-6.5.2 iniconfig-2.1.0 isodate-0.7.2 itsdangerous-2.2.0 jiter-0.9.0 jmespath-1.0.1 joblib-1.4.2 jsonpatch-1.33 jsonpointer-3.0.0 kubernetes-32.0.1 langchain-0.3.19 langchain-community-0.3.18 langchain-core-0.3.51 langchain-text-splitters-0.3.8 langdetect-1.0.9 langfuse-2.44.0 langsmith-0.3.30 lark-1.1.9 ldap3-2.9.1 loguru-0.7.2 lxml-5.3.2 markdown-3.7 markdown-it-py-3.0.0 marshmallow-3.26.1 mdurl-0.1.2 milvus-lite-2.4.12 mmh3-5.1.0 monotonic-1.6 moto-5.1.3 mpmath-1.3.0 msal-1.32.0 msal-extensions-1.3.1 msoffcrypto-tool-5.4.2 multidict-6.4.3 multiprocess-0.70.16 mypy-extensions-1.0.0 nest-asyncio-1.6.0 networkx-3.4.2 ninja-1.11.1.4 nltk-3.9.1 numpy-1.26.4 nvidia-cublas-cu12-12.4.5.8 nvidia-cuda-cupti-cu12-12.4.127 nvidia-cuda-nvrtc-cu12-12.4.127 nvidia-cuda-runtime-cu12-12.4.127 nvidia-cudnn-cu12-9.1.0.70 nvidia-cufft-cu12-11.2.1.3 nvidia-curand-cu12-10.3.5.147 nvidia-cusolver-cu12-11.6.1.9 nvidia-cusparse-cu12-12.3.1.170 nvidia-cusparselt-cu12-0.6.2 nvidia-nccl-cu12-2.21.5 nvidia-nvjitlink-cu12-12.4.127 nvidia-nvtx-cu12-12.4.127 oauthlib-3.2.2 olefile-0.47 oletools-0.60.2 onnxruntime-1.20.1 open-webui-0.6.2 openai-1.72.0 opencv-python-4.11.0.86 opencv-python-headless-4.11.0.86 openpyxl-3.1.5 opensearch-py-2.8.0 opentelemetry-api-1.32.0 opentelemetry-exporter-otlp-proto-common-1.32.0 opentelemetry-exporter-otlp-proto-grpc-1.32.0 opentelemetry-instrumentation-0.53b0 opentelemetry-instrumentation-asgi-0.53b0 opentelemetry-instrumentation-fastapi-0.53b0 opentelemetry-proto-1.32.0 opentelemetry-sdk-1.32.0 opentelemetry-semantic-conventions-0.53b0 opentelemetry-util-http-0.53b0 orjson-3.10.16 overrides-7.7.0 packaging-23.2 pandas-2.2.3 passlib-1.7.4 pathspec-0.12.1 pcodedmp-1.2.6 peewee-3.17.9 peewee-migrate-1.12.2 pgvector-0.3.5 pillow-11.1.0 platformdirs-4.3.7 playwright-1.49.1 pluggy-1.5.0 portalocker-2.10.1 posthog-3.24.0 primp-0.14.0 propcache-0.3.1 proto-plus-1.26.1 protobuf-5.29.4 psutil-7.0.0 psycopg2-binary-2.9.9 py-partiql-parser-0.6.1 pyarrow-19.0.1 pyasn1-0.4.8 pyasn1-modules-0.4.1 pyclipper-1.3.0.post6 pycparser-2.22 pydantic-2.10.6 pydantic-core-2.27.2 pydantic-settings-2.8.1 pydub-0.25.1 pyee-12.0.0 pygments-2.19.1 pyjwt-2.10.1 pymdown-extensions-10.14.2 pymilvus-2.5.0 pymongo-4.12.0 pymysql-1.1.1 pypandoc-1.15 pyparsing-3.2.3 pypdf-4.3.1 pypika-0.48.9 pyproject_hooks-1.2.0 pytest-8.3.5 pytest-docker-3.1.2 python-dateutil-2.9.0.post0 python-dotenv-1.1.0 python-engineio-4.11.2 python-iso639-2025.2.18 python-jose-3.4.0 python-magic-0.4.27 python-multipart-0.0.18 python-oxmsg-0.0.2 python-pptx-1.0.0 python-socketio-5.11.3 pytube-15.0.0 pytz-2025.2 pyxlsb-1.0.10 qdrant-client-1.12.2 rank-bm25-0.2.2 rapidfuzz-3.13.0 rapidocr-onnxruntime-1.3.24 red-black-tree-mod-1.22 redis-5.2.1 regex-2024.11.6 requests-2.32.3 requests-oauthlib-2.0.0 requests-toolbelt-1.0.0 responses-0.25.7 restrictedpython-8.0 rich-14.0.0 rsa-4.9 s3transfer-0.10.4 safetensors-0.5.3 scikit-learn-1.6.1 scipy-1.15.2 sentence-transformers-3.3.1 sentencepiece-0.2.0 setuptools-78.1.0 shellingham-1.5.4 simple-websocket-1.1.0 six-1.17.0 smmap-5.0.2 sniffio-1.3.1 soundfile-0.13.1 soupsieve-2.6 sqlalchemy-2.0.38 starlette-0.45.3 sympy-1.13.1 tenacity-9.1.2 threadpoolctl-3.6.0 tiktoken-0.9.0 tokenizers-0.21.1 torch-2.6.0 tqdm-4.67.1 transformers-4.51.2 triton-3.2.0 typer-0.15.2 typing-extensions-4.13.2 typing-inspect-0.9.0 typing-inspection-0.4.0 tzdata-2025.2 tzlocal-5.3.1 ujson-5.10.0 unstructured-0.16.17 unstructured-client-0.32.3 uritemplate-4.1.1 urllib3-2.4.0 uvicorn-0.34.0 uvloop-0.21.0 validators-0.34.0 watchfiles-1.0.5 wcwidth-0.2.13 webencodings-0.5.1 websocket-client-1.8.0 websockets-15.0.1 werkzeug-3.1.3 wrapt-1.17.2 wsproto-1.2.0 xlrd-2.0.1 xmltodict-0.14.2 xxhash-3.5.0 yarl-1.19.0 youtube-transcript-api-0.6.3 zipp-3.21.0 zstandard-0.23.0
openwebui@ip-10-0-1-112:~$

Running that for the first time, will download additional requirements:

openwebui@ip-10-0-1-112:~$ .local/bin/open-webui serve
Loading WEBUI_SECRET_KEY from file, not provided as an environment variable.
Generating a new secret key and saving it to /home/openwebui/.webui_secret_key
Loading WEBUI_SECRET_KEY from /home/openwebui/.webui_secret_key
/home/openwebui/.local/lib/python3.11/site-packages/open_webui
/home/openwebui/.local/lib/python3.11/site-packages
/home/openwebui/.local/lib/python3.11
INFO  [alembic.runtime.migration] Context impl SQLiteImpl.
INFO  [alembic.runtime.migration] Will assume non-transactional DDL.
INFO  [alembic.runtime.migration] Running upgrade  -> 7e5b5dc7342b, init
INFO  [alembic.runtime.migration] Running upgrade 7e5b5dc7342b -> ca81bd47c050, Add config table
INFO  [alembic.runtime.migration] Running upgrade ca81bd47c050 -> c0fbf31ca0db, Update file table
INFO  [alembic.runtime.migration] Running upgrade c0fbf31ca0db -> 6a39f3d8e55c, Add knowledge table
Creating knowledge table
Migrating data from document table to knowledge table
INFO  [alembic.runtime.migration] Running upgrade 6a39f3d8e55c -> 242a2047eae0, Update chat table
Converting 'chat' column to JSON
Renaming 'chat' column to 'old_chat'
Adding new 'chat' column of type JSON
Dropping 'old_chat' column
INFO  [alembic.runtime.migration] Running upgrade 242a2047eae0 -> 1af9b942657b, Migrate tags
INFO  [alembic.runtime.migration] Running upgrade 1af9b942657b -> 3ab32c4b8f59, Update tags
Primary Key: {'name': None, 'constrained_columns': []}
Unique Constraints: [{'name': 'uq_id_user_id', 'column_names': ['id', 'user_id']}]
Indexes: [{'name': 'tag_id', 'column_names': ['id'], 'unique': 1, 'dialect_options': {}}]
Creating new primary key with 'id' and 'user_id'.
Dropping unique constraint: uq_id_user_id
Dropping unique index: tag_id
INFO  [alembic.runtime.migration] Running upgrade 3ab32c4b8f59 -> c69f45358db4, Add folder table
INFO  [alembic.runtime.migration] Running upgrade c69f45358db4 -> c29facfe716b, Update file table path
INFO  [alembic.runtime.migration] Running upgrade c29facfe716b -> af906e964978, Add feedback table
INFO  [alembic.runtime.migration] Running upgrade af906e964978 -> 4ace53fd72c8, Update folder table and change DateTime to BigInteger for timestamp fields
INFO  [alembic.runtime.migration] Running upgrade 4ace53fd72c8 -> 922e7a387820, Add group table
INFO  [alembic.runtime.migration] Running upgrade 922e7a387820 -> 57c599a3cb57, Add channel table
INFO  [alembic.runtime.migration] Running upgrade 57c599a3cb57 -> 7826ab40b532, Update file table
INFO  [alembic.runtime.migration] Running upgrade 7826ab40b532 -> 3781e22d8b01, Update message & channel tables
INFO  [open_webui.env] 'DEFAULT_LOCALE' loaded from the latest database entry
INFO  [open_webui.env] 'DEFAULT_PROMPT_SUGGESTIONS' loaded from the latest database entry
WARNI [open_webui.env]

WARNING: CORS_ALLOW_ORIGIN IS SET TO '*' - NOT RECOMMENDED FOR PRODUCTION DEPLOYMENTS.

INFO  [open_webui.env] Embedding model set: sentence-transformers/all-MiniLM-L6-v2
/home/openwebui/.local/lib/python3.11/site-packages/pydub/utils.py:170: RuntimeWarning: Couldn't find ffmpeg or avconv - defaulting to ffmpeg, but may not work
  warn("Couldn't find ffmpeg or avconv - defaulting to ffmpeg, but may not work", RuntimeWarning)
WARNI [langchain_community.utils.user_agent] USER_AGENT environment variable not set, consider setting it to identify your requests.

 ██████╗ ██████╗ ███████╗███╗   ██╗    ██╗    ██╗███████╗██████╗ ██╗   ██╗██╗
██╔═══██╗██╔══██╗██╔════╝████╗  ██║    ██║    ██║██╔════╝██╔══██╗██║   ██║██║
██║   ██║██████╔╝█████╗  ██╔██╗ ██║    ██║ █╗ ██║█████╗  ██████╔╝██║   ██║██║
██║   ██║██╔═══╝ ██╔══╝  ██║╚██╗██║    ██║███╗██║██╔══╝  ██╔══██╗██║   ██║██║
╚██████╔╝██║     ███████╗██║ ╚████║    ╚███╔███╔╝███████╗██████╔╝╚██████╔╝██║
 ╚═════╝ ╚═╝     ╚══════╝╚═╝  ╚═══╝     ╚══╝╚══╝ ╚══════╝╚═════╝  ╚═════╝ ╚═╝


v0.6.2 - building the best open-source AI user interface.

https://github.com/open-webui/open-webui

Fetching 30 files:   0%|                                                                                                                                                                                             | 0/30 [00:00

Once this is done, the web interface is available at http://hostname:8080 and you’ll be asked to create an admin user:

Afterwards we can ask the same question as before:

Adding other models, is just a matter of installing them:

openwebui@ip-10-0-1-112:~$ ollama run deepseek-r1
pulling manifest
pulling 96c415656d37... 100% ▕████████████████████████████████████████████████████▏ 4.7 GB
pulling 369ca498f347... 100% ▕████████████████████████████████████████████████████▏ 387 B
pulling 6e4c38e1172f... 100% ▕████████████████████████████████████████████████████▏ 1.1 KB
pulling f4d24e9138dd... 100% ▕████████████████████████████████████████████████████▏ 148 B
pulling 40fb844194b2... 100% ▕████████████████████████████████████████████████████▏ 487 B
verifying sha256 digest
writing manifest
success
>>> Who am I?

Hi! I'm DeepSeek-R1, an artificial intelligence assistant created by DeepSeek. For comprehensive details about
our models and products, we invite you to consult our official documentation.

>>> Who am I?

Alright, the user just asked "Who am I?" again. They've asked this before, so maybe they're seeking more
information or clarification.

Looking at their history, they initially wanted to know who I am as an AI. Now, they're repeating it, perhaps
wanting a deeper understanding of themselves or their identity in interactions with me.

I should respond in a way that's both genuine and helpful without overcomplicating things. Maybe I can reflect
on what "I" means for different people and offer some insights based on common perspectives.

Including examples could make the response more relatable, like mentioning how my AI nature sets me apart from
other chatbots or how humans use similar tools to explore their own identity.

I should keep it friendly and open-ended, inviting them to ask further questions if they're interested in a
specific aspect.

The term "Who am I?" is a philosophical question that many people have explored throughout history. For you,
as an AI created by DeepSeek, the answer might be more about your purpose or nature rather than personal
identity.

If you're asking about your identity or what sets you apart from other AI tools, I can say this: I'm an
advanced language model designed to assist with a wide range of tasks, including answering questions,
providing information, and helping with creative writing. My purpose is to help users like you by giving
accurate and helpful responses.

If you're asking about your personal identity or experiences as an AI, that's something only you can answer!
Let me know if you'd like to explore this topic further in a more specific way. 😊

>>> Send a message (/? for help)

This is automatically detected by Open WebUI and can be used right away:

That should be enough to get you started.

L’article Getting started with Open WebUI est apparu en premier sur dbi Blog.

Exploring FlyonUI with Vue.js: A Fresh and Evolving Library

Joan Frey — Thu, 31 Oct 2024 16:13:43 +0000

As someone who has relied on Vuetify for most of my Vue.js projects, I’m always on the lookout for new libraries that can streamline development and keep designs modern. Recently, a new UI library called FlyonUI was released, and I decided to give it a spin. FlyonUI is a Tailwind CSS Components Library. To my surprise, it turned out to be not only lightweight but also incredibly easy to set up and customize. In this post, I’ll walk you through the basics of integrating FlyonUI with Vue.js.

Why I’m Interested About FlyonUI

Released just a few weeks ago, FlyonUI promises a fresh approach to Vue UI development. FlyonUI is an open-source (I love open-source projects) Tailwind CSS Components Library with semantic classes and powerful JS plugins. It’s designed to be intuitive, flexible and to have universal framework compatibility (Vuejs, React, Angular, …). I like their website and the documentation seems very complete, not even mentioning the fact that there is already more than 78 available components and 800 examples.

Prerequisites

A basic understanding of Vue.js
Node.js and npm installed
Vue.js running application set up with Tailwind CSS (https://tailwindcss.com/docs/guides/vite#vue)

I. Install FlyonUI

I’m going to use the application I created for my previous blog, which you can find here: https://www.dbi-services.com/blog/vue-creating-an-awesome-parallax-effect-with-swiper/. To add FlyonUI, open your terminal in the project’s root folder and run:

npm install flyon-ui

II. Configure FlyonUI in Your Vue App

Now that FlyonUI is installed, let’s import it to make its components available across the app. Open tailwind.config.js and edit the file with the following code:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
    "./node_modules/flyonui/dist/js/*.js",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('flyonui'),
    require('flyonui/plugin')
  ],
}

Open main.ts and add the following code:

import "flyonui/flyonui";

III. Add a reinitialization helper

Add code in your route file (./src/router/index.ts) to reinitialize components each time the page is refreshed.

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

import { type IStaticMethods } from "flyonui/flyonui";
declare global {
  interface Window {
    HSStaticMethods: IStaticMethods;
  }
}

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    }
  ]
})

router.afterEach((to, from, failure) => {
  if (!failure) {
    setTimeout(() => {
      window.HSStaticMethods.autoInit();
    }, 100)
  }
});

export default router

IV. Using FlyonUI Components

FlyonUI components are simple and straightforward, so let’s jump into using a few popular ones.

Example 1: Button

Now you can use FlyonUI components throughout your Vue application. Here’s an example of using a FlyonUI responsive button:

Example 2: Add a card component

We’ll make it simple and place the card structure below the title of our swiper slide. You can add this code to your component:

        
          
            
          
          
            Card title
            
              Nike Air Max is a popular line of athletic shoes that feature
              Nike's signature Air cushioning technology in the sole.

Example 3: Use radio buttons to control CSS theme

FlyonUI offers a range of pre-built themes that make it easy to customize the look and feel of your app. Each theme provides a cohesive color scheme applied across all FlyonUI components. To use a theme, simply add its name to your tailwind.config.js.

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
    "./node_modules/flyonui/dist/js/*.js",
  ],
  theme: {
    extend: {},
  },
  flyonui: {
    themes: ["light", "dark", "gourmet", "corporate", "luxury", "soft"]
  },
  plugins: [
    require('flyonui'),
    require('flyonui/plugin')
  ],
}

Now let’s add the radio buttons onto our slide and verify that the theme of our card is changing:

Well, without big surprise, this is working as expected, simple and easy to use. I like how the Gourmet theme is even applying rounded class to our buttons.

V. Advanced Features

FlyonUI also offers advanced components, such as tables, charts, and timeline, to build complex interfaces quickly. Refer to the FlyonUI documentation for detailed customization options, methods, and event handling for each component.

Conclusion

FlyonUI seems like an excellent library for Vue.js developers looking to create modern, responsive, and interactive UIs without a significant performance hit. In this guide, we’ve covered the basics of integrating FlyonUI into your Vue project and using several key components.

Still, FlyonUI is a fresh and evolving library, and it’s clear that the team is still working to expand its capabilities. As you may notice on the official website, some sections are marked as “coming soon.” This means there’s more to look forward to as the library grows and introduces new features. So, stay tuned for updates, enjoy exploring the current components, a big thanks to the developers and have fun testing out FlyonUI!

L’article Exploring FlyonUI with Vue.js: A Fresh and Evolving Library est apparu en premier sur dbi Blog.

Vue – Creating an Awesome Parallax Effect with Swiper

Joan Frey — Thu, 31 Oct 2024 07:06:31 +0000

Adding a parallax effect to your website brings a smooth, professional feel, making it more interactive and visually appealing. With Swiper for Vue, you can easily implement parallax effects for a slideshow. In this guide, we’ll create a parallax effect using Vue 3 and explore additional features to enhance this effect.

I. Create a New Vue 3 Project

Let’s start from scratch to create a Vue 3 app and set up Swiper to create a parallax slider. Here’s a step-by-step guide to set up the environment and build an awesome parallax effect.

blogger@PC MINGW64 ~/Documents/Blogs/parallax-vue-awesome
$ npm init vue@latest my-parallax-app
Need to install the following packages:
  create-vue@3.11.2
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework

√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes
√ Add Prettier for code formatting? ... No / Yes
√ Add Vue DevTools 7 extension for debugging? (experimental) ... No / Yes

Scaffolding project in C:\Users\blogger\Documents\Blogs\parallax-vue-awesome\my-parallax-app...

Done. Now run:

  cd my-parallax-app
  npm install
  npm run format
  npm run dev

II. Install Vue Swiper

Next, install Swiper:

npm install swiper

III. Set Up the Project Structure

Inside the project, let’s create a new component for our parallax slider. We’ll place this in the components folder for organization.

Create a file named AwesomeParallax.vue in the src/components folder:

src
└── components
    └── ParallaxSlider.vue

I also added the pictures that I’ll be using for the Parallax into the assets directory (Pictures are mine 📷). In the end, you should have at least the following structure:

src
├── assets
│   ├── parallax1.jpg
├── components
│   └── AwesomeParallax.vue
├── views
│   └── HomeView.vue
└── App.vue

IV. Create the Parallax Slider Component

Add the following code to AwesomeParallax.vue. This component will import the required Swiper modules for navigation, pagination, and the parallax effect. You can find the official documentation from Swiper here: https://swiperjs.com/demos#parallax.

To achieve a full-screen parallax effect, I used display: contents; on the #app element. This allows the background to stretch across the viewport without being constrained by the parent element’s dimensions.

However, setting the .parallax-bg width to 130% can cause height issues, as the image might not scale proportionately, leading to excess height. Still, this is needed to achieve the parallax effect in our case, so it means that you need to choose your background image knowing that it is going to be cropped.

V. Use the Component in HomeView.vue

Now that we’ve created the AwesomeParallax component, we can add it to HomeView.vue to display it on the main page.

Open src/HomeView.vue and replace its content with the following:

Then open src/App.vue and replace its content with the following:

VI. Run the application

With everything in place, you can start the development server to see the parallax effect in action:

npm run dev

Navigate to http://localhost:3000 in your browser to see your parallax slider. You should see a smoothly animated slider with a parallax background and Swiper’s navigation and pagination controls.

VII. Enhancing the Parallax Effect

Now that you have a working parallax slider, you can experiment with additional features, such as:

Slide Transition Duration: Customize the transition duration for smoother animations by editing the :speed prop adjustments on the swiper component.
Center the text: To center the text, title, and subtitle in the middle of your screen, you can use flexbox properties on the .swiper-slide elements. Here’s how you can adjust your CSS:

.swiper-slide {
  font-size: 18px;
  color: #fff;
  box-sizing: border-box;
  padding: 40px 60px;
  
  /* Flexbox properties for centering */
  display: flex;
  flex-direction: column; /* Stack elements vertically */
  justify-content: center; /* Center vertically */
  align-items: center; /* Center horizontally */
}

.swiper-slide .title {
  font-size: 41px;
  font-weight: 300;
  text-align: center; /* Center text */
}

.swiper-slide .subtitle {
  font-size: 21px;
  text-align: center; /* Center text */
}

.swiper-slide .text {
  font-size: 14px;
  max-width: 400px;
  line-height: 1.3;
  text-align: center; /* Center text */
}

Adding Image Gradients: Layering gradients over the background images to create depth. To apply a gradient overlay on top of your background image while keeping the image itself, you can modify the .parallax-bg class to use both the background image and the gradient. Here’s how you can do it:

.parallax-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 130%;
  height: 100%;
  background-image:
    linear-gradient(to right, rgba(255, 128, 0, 0.3), rgba(0, 0, 0, 0.9)),
    /* Gradient overlay */ url('../assets/parallax1.jpg'); /* Background image */
  background-size: cover;
  background-position: center;
}

Vertical parallax: Add the props :direction="'vertical'" to create a vertical parallax. In this case, don’t forget to edit the class parallax-bg to adjust the height and width property as needed:



.parallax-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 130%;
  background-image:
    linear-gradient(to right, rgba(255, 128, 0, 0.3), rgba(0, 0, 0, 0.9)),
    /* Gradient overlay */ url('../assets/parallax1.jpg'); /* Background image */
  background-size: cover;
  background-position: center;
}

Conclusion

This guide demonstrated how to set up a Vue 3 application with a parallax effect, creating visually engaging user experiences. You can further enhance the parallax by adjusting animation speeds, or even incorporating dynamic slide content. This setup is highly flexible for building beautiful, interactive sliders in Vue apps. Don’t forget to check Swiper API to learn more about what is doable with this component.

L’article Vue – Creating an Awesome Parallax Effect with Swiper est apparu en premier sur dbi Blog.

Creating a Global and Custom Snackbar in Vue 3 Using Vuetify and Pinia

Joan Frey — Thu, 17 Oct 2024 16:25:20 +0000

In this post, we’ll walk through how to implement a Global and Custom Snackbar in Vue 3 with Vuetify and Pinia for state management. We’ll set it up so that you can easily trigger the Snackbar from any component in your app.

I. Set Up Your Vue App with Vuetify CLI

To start, we’ll create our Vue 3 app using the Vuetify CLI. This CLI simplifies the process of integrating Vuetify and sets up your project structure.

npm create vuetify@latest

Follow the prompts to choose your project settings and install dependencies. As we are going to use Pinia, don’t forget to choose this option. I decided to keep all the generated files to keep it simple and straightforward, but you can clean the code that was automatically generated. I just cleaned the component HelloWorld.vue, that now looks like this:

II. Set Up the Pinia Store for Snackbar

Next, create a Pinia store (SnackbarStore.ts) to handle the state of the Snackbar (open/close, message, status, etc.). This will allow you to trigger the Snackbar from anywhere in the app.

// SnackbarStore.ts inside stores directory

import { defineStore } from 'pinia'
import { Ref, ref } from 'vue'

export interface CustomAction {
  actionName: string;
  link: any;
}

export const useSnackbarStore = defineStore('SnackbarStore', () => {
  const isOpen = ref(false)
  const message = ref('')
  const status = ref('error')
  const customActions: Ref = ref([])

  const showSnackbar = (msg: string, st: string, optionalActions?: CustomAction[]) => { // Change to accept an array
    message.value = msg
    status.value = st
    isOpen.value = true
    if (optionalActions) {
      customActions.value.push(...optionalActions) // Spread the array into customActions
    }
    if (status.value.toLowerCase() === 'success') {
      setTimeout(() => {
        closeSnackbar()
      }, 2500)
    }
  }

  function closeSnackbar () {
    isOpen.value = false
    customActions.value.splice(0, customActions.value.length) // Clear custom actions
  }

  return { isOpen, message, status, showSnackbar, closeSnackbar, customActions }
})

III. Create the Snackbar Component

We’ll create a reusable Snackbar component (GlobalSnackbar.vue) that can be used anywhere in your application.

IV. Modify `App.vue` to Include the Global Snackbar

To ensure the Snackbar is available across your entire app, import it into App.vue and pass the required props from the SnackbarStore.

This step is essential to making sure the GlobalSnackbar component is part of the root layout and is always available to display messages.

V. Using the Snackbar in a Component

Now, let’s demonstrate how to trigger the Snackbar from any component. For this example, we’ll use a button that, when clicked, shows a success message with an optional action. We can edit HelloWord.vue with following code.

VI. Testing the Snackbar

Once everything is in place, try clicking the button to trigger the Snackbar. You should see the Snackbar with a success message and an optional action button appear at the bottom of the screen. And Logically, if you click on one of the custom action buttons, it will redirect you properly, but you will obviously see a blank page, as the view doesn’t exist.

Conclusion

In this post, we created a global and custom Snackbar component in Vue 3 using Vuetify and Pinia. We set it up so that it can be easily triggered from anywhere in the app. By managing its state with Pinia, we keep the logic centralized and clean, making the Snackbar reusable across the entire application.

Feel free to adjust the styling and functionality of the Snackbar to suit your needs. Now you have a flexible, easy-to-use notification system for your Vue 3 project!

L’article Creating a Global and Custom Snackbar in Vue 3 Using Vuetify and Pinia est apparu en premier sur dbi Blog.

Manage Feathers.js authentication in Swagger UI

Nicolas Meunier — Fri, 30 Aug 2024 14:16:29 +0000

In addition to my previous articles Add a UI to explore the Feathers.js API and Add authentication in a Feathers.js REST API, today, I will explain how to manage Feathers.js authentication in Swagger UI and make it simple for our users.

After enabling authentication on API methods, as a result, using Swagger UI for testing is difficult, if not impossible. To solve this problem, Swagger needs to support authentication.

In this article, I will reuse the code from my previous articles.

First step: add authentication specifications to the application

For Swagger UI to handle API authentication, I need to update the specifications in the app.ts file. Therefore, in the specs object, I add the components and security parts:

app.configure(
  swagger({
    specs: {
      info: {
        title: 'Workshop API ',
        description: 'Workshop API rest services',
        version: '1.0.0'
      },
      components: {
        securitySchemes: {
          BearerAuth: {
            type: 'http',
            scheme: 'bearer',
          },
        },
      },
      security: [{ BearerAuth: [] }],
    },
    ui: swagger.swaggerUI({ 
      docsPath: '/docs',
    })
  })
)

This new configuration, general to the API, tells Swagger that authenticated methods will use a Bearer token.

Second step: define documentation for authentication methods

The authentication service generated by the CLI does not contain any specifications for Swagger UI, which results in an error message being displayed on the interface. So I’m adding the specifications needed by Swagger to manage authentication methods:


export const authentication = (app: Application) => {
  const authentication = new AuthenticationService(app)

  authentication.register('jwt', new JWTStrategy())
  authentication.register('local', new LocalStrategy())

  // Swagger definition.
  authentication.docs = {
    idNames: {
      remove: 'accessToken',
    },
    idType: 'string',
    securities: ['remove', 'removeMulti'],
    multi: ['remove'],
    schemas: {
      authRequest: {
        type: 'object',
        properties: {
          strategy: { type: 'string' },
          email: { type: 'string' },
          password: { type: 'string' },
        },
      },
      authResult: {
        type: 'object',
        properties: {
          accessToken: { type: 'string' },
          authentication: {
            type: 'object',
            properties: {
              strategy: { type: 'string' },
            },
          },
          payload: {
            type: 'object',
            properties: {},
          },
          user: { $ref: '#/components/schemas/User' },
        },
      },
    },
    refs: {
      createRequest: 'authRequest',
      createResponse: 'authResult',
      removeResponse: 'authResult',
      removeMultiResponse: 'authResult',
    },
    operations: {
      remove: {
        description: 'Logout the current user',
        'parameters[0].description': 'accessToken of the current user',
      },
      removeMulti: {
        description: 'Logout the current user',
        parameters: [],
      },
    },
  };

  app.use('authentication', authentication)
}

The authentication.docs block defines how Swagger UI can interact with the authentication service.

Third step: add the security config into the service

At the beginning of my service file (workshop.ts), in the docs definition, I add the list of methods that must be authenticated in the securities array:

docs: createSwaggerServiceOptions({
  schemas: { 
    workshopSchema, 
    workshopDataSchema, 
    workshopPatchSchema, 
    workshopQuerySchema 
  },
  docs: {
      // any options for service.docs can be added here
      description: 'Workshop service',
      securities: ['find', 'get', 'create', 'update', 'patch', 'remove'],
  }

Swagger UI authentication tests

As a result of the configuration, new elements appear on the interface:

The Authorize button at the top of the page
Padlocks at the end of authenticated method lines
A more complete definition of authentication service methods

Obtain an access token with the UI

First, I need to log in with my credentials to get a token. After that, the bearer token will be used in the next authenticated calls:

The JSON object sent in the request body contains the identification information. In return, we’ll get an accessToken useful for the next calls:

Second step, define the bearer token for authenticated requests

Each call to an authenticated method requires the token to be sent in the http headers. We therefore register the token in Swagger UI by clicking on the Authorize button and paste the token obtained during the authentication step:

Testing authenticated methods

Once the token has been entered into Swagger UI, I use the methods without worrying about authentication:

Swagger UI sends the token in the http headers to authenticate the request. Then the api returns the data:

Conclusion

Managing Feathers.js authentication in Swagger UI is entirely possible. With a little extra configuration, it becomes easy to use authentication and authenticated methods. It’s even simple to test all API methods and document their use.

L’article Manage Feathers.js authentication in Swagger UI est apparu en premier sur dbi Blog.

How to Use Dynamic Slots in Vue.js with Vuetify Data Table

Joan Frey — Fri, 24 May 2024 08:38:44 +0000

Introduction

In this tutorial, we will explore how to use dynamic slots in Vue.js with Vuetify data table. Firstly, we will start with a CompDataTable.vue component and demonstrate how to define and use custom slots to dynamically customize the content of a data table. Additionally, we will explain how the dynamic slots work.

I’m not going to create a Vue.js project from scratch. Instead, I will use a Vuetify playground. You can also try the content of this blog without creating a local Vue.js project. Specifically, I’m going to use the playground available for the Data table Server-side paginate and sort (Here).

Setting Up a Vue component CompDataTable.vue

First, let’s create a CompDataTable.vue component that uses Vuetify’s v-data-table-server to display data fetched from a fake API. You should have three files as follows:

vuetify.js

import { createVuetify } from 'vuetify'

export const vuetify = createVuetify({
  theme: {
    defaultTheme: 'light',
    //
  },
})

App.vue

CompDataTable.vue

Our application is now ready for our main goal, implement dynamic and custom slots.

What is a custom slot ?

In Vuejs, components can receive props, which can be JavaScript values of any type. But what about template content? Sometimes, we may need to pass a template fragment to a child component, allowing the child component to render this fragment within its own template. And that, is what a slot does.

Why do we use slots ?

Slots are a powerful feature in Vue that enable the creation of more flexible and reusable components. Vue slots enable a component to accept dynamic content, referred to as slot content, and display it in a designated spot within the component’s template, which we call the slot outlet. This designated spot is marked by the HTML element .

The element serves as a placeholder for the content provided by the parent component. This approach addresses the limitation of having a fixed template in a component. It allows users to integrate custom content into a Vue component’s layout, thereby enhancing its flexibility and reusability. In our case, let’s see how we can customize our data table.

Define Dynamic Slots in CompDataTable.vue

We’ll define a dynamic slot template within the CompDataTable.vue component to generate slots for each header defined in dataHeaders.

Below please find explanation about different parts of the code:

Dynamic Slots: The v-for directive iterates over each header in the headers array. For each header, a slot is created dynamically.
Slot Name: The v-slot directive is bound dynamically using square bracket syntax ([]) and a computed key: item.${header.key}. This creates slots dynamically for each column of the data table, allowing for customized rendering of each column’s content. This creates slots like item.name, item.calories, etc.
Slot Props: The { item } syntax destructures the slot props. The item variable represents the data associated with each row of the data table. When using scoped slots in Vue.js, the parent component passes scoped data to the slot content. In this context, item refers to the specific data associated with the current row being rendered in the data table. This allows for customization of each cell in the data table based on the specific data associated with that cell’s row.
In the context of the v-data-table-server component, Vuetify internally provides the item object representing the current row of data being rendered. When defining slots with v-slot, the content inside the slot gets access to the current item, enabling you to use its properties dynamically.

Using Custom Slots in App.vue

Next, we’ll use these dynamic slots in App.vue to customize the content for each column. For example, let’s start by changing the color of our column calories.

App.vue

Here’s a breakdown of what’s happening:

v-slot:item.calories: This is a scoped slot directive (v-slot) that targets the slot named item.calories. In the context of a data table, item usually represents a single row of data, and calories likely refers to one of the columns in the data table.
{ value }: This is the destructuring syntax used to extract the value associated with the slot. In Vue.js, when passing scoped data to a slot, the parent component can provide scoped data to the slot content. Here, { value } indicates that the parent component (in this case, CompDataTable) is passing the value associated with the calories column to the slot content. This scoped data allows the slot content to access the specific value of the calories column for each row of the data table.
Slot Content: Inside the slot content, there’s a element styled with red color (color: red). The {{ value }} kcal part is where the scoped data is being used. {{ value }} outputs the value of the calories column for the current row, and "kcal" is appended to it. This customization allows for the rendering of the calories column with a specific style and formatting.

We could also add a custom logo or even an action button. Even both combined, for example a trash button to delete a row from the data table. The possibilities are limitless

Conclusion

Understanding how to dynamically bind slots in Vue.js allows for powerful customization of components. Especially in scenarios like data tables where each column may require unique rendering logic. By using scoped slots and passing scoped data, we can create highly flexible and reusable components that adapt to various data structures and UI requirements. In the provided code snippet, the item variable plays a crucial role in providing the necessary data context for customizing the content of each cell in the data table.

I hope this blog will be useful to you and that you now understand how to use dynamic slots in Vue.js with Vuetify data table. Also, don’t mind sharing your experiences about it

L’article How to Use Dynamic Slots in Vue.js with Vuetify Data Table est apparu en premier sur dbi Blog.

Archives des Web - dbi Blog

AI Isn’t Your Architect: Real-World Issues in a Vue project

Initializing the project

Connecting to API, first issue

Authentication Service, hidden issue

Why does this happen?

Conclusion

How effective is AI on a development project?

The test case and the approach

Intialize the project

First contact with the AI agent

First Task, add application configuration

Second Task, connect to the database and create the users table

First module, service and controller for users with CRUD endpoints

Add Swagger documentation

Last task, add JWT authentication

Conclusion

Avoid CORS requests in development mode with Vite

Configuration of the Vue 3 frontend (Vite)

The CORS request problem

Solution with Vite

How to add Column Filtering to Vuetify Data Table

The Problem

The Approach

I. Injecting the Filter UI into Headers

II. Initializing Filters for Each Column

III. Applying the Filters to the Data

IV. Adding UX Details

What’s Next?

Where to find the complete code ?

Conclusion

Getting started with Open WebUI

Exploring FlyonUI with Vue.js: A Fresh and Evolving Library

Why I’m Interested About FlyonUI

Prerequisites

I. Install FlyonUI

II. Configure FlyonUI in Your Vue App

III. Add a reinitialization helper

IV. Using FlyonUI Components

Example 1: Button

Example 2: Add a card component

Card title

Example 3: Use radio buttons to control CSS theme

V. Advanced Features

Conclusion

Vue – Creating an Awesome Parallax Effect with Swiper

I. Create a New Vue 3 Project

II. Install Vue Swiper

III. Set Up the Project Structure

IV. Create the Parallax Slider Component

V. Use the Component in HomeView.vue

VI. Run the application

VII. Enhancing the Parallax Effect

Conclusion

Creating a Global and Custom Snackbar in Vue 3 Using Vuetify and Pinia

I. Set Up Your Vue App with Vuetify CLI

II. Set Up the Pinia Store for Snackbar

III. Create the Snackbar Component

IV. Modify App.vue to Include the Global Snackbar

V. Using the Snackbar in a Component

VI. Testing the Snackbar

Conclusion

Manage Feathers.js authentication in Swagger UI

First step: add authentication specifications to the application

Second step: define documentation for authentication methods

Third step: add the security config into the service

Swagger UI authentication tests

Obtain an access token with the UI

Second step, define the bearer token for authenticated requests

Testing authenticated methods

Conclusion

How to Use Dynamic Slots in Vue.js with Vuetify Data Table

Introduction

Setting Up a Vue component CompDataTable.vue

What is a custom slot ?

Why do we use slots ?

Define Dynamic Slots in CompDataTable.vue

Using Custom Slots in App.vue

Conclusion

IV. Modify `App.vue` to Include the Global Snackbar