dcupl-demos/dcupl-nuxt-autosuggest

dcupl demo based on Nuxt and tailwindUI, loading 44K fashion products from dcupl demo project "Fashion Products" (data provided by kaggle.com)
Demo project for dcupl, App Development Platform for Data-Intensive Web Applications.

@dcupl/cli

@dcupl/core

@dcupl/loader

GitHub

---

dcupl autosuggest (Nuxt 3 + tailwindcss)

dcupl - Read the dcupl Docs Nuxt 3 - Look at the Nuxt 3 documentation tailwindUI - Read the tailwindUI docs

Setup

Make sure to install the dependencies:

# yarn
yarn install

# npm
npm install

# pnpm
pnpm install

Development Server

Start the development server on http://localhost:3000

npm run dev

dcupl

Please see the readme.md in /dcupl-data

Start your dcupl development server running on http://localhost:8083

cd dcupl-data
npm i
dcupl serve

Config settings

The data, which is included in dcupl-data, is the data from the dcupl demo project "Fashion Products", which can be joined for free in the Console. This demo includes 44K data records.

https://docs.dcupl.com/docs/examples/fashion-products/

The page http://localhost:3000/tailwindui-dcupl-autosuggest/ includes a tailwindui autocomplete combobox and fetches the data of the mentioned dcupl demo project. 50 suggestions are generated out of more than 44K products.

The page http://localhost:3000/load-from-dcupl/index.vue includes the settings for ...

• using a local dcupl server
• and the demo project and loading the data via CDN

If you want to connect your local project to a new dcupl Console project ...

• Create the project in the dcupl Console (https://console.dcupl.com)
• Add dcupl.secrets.json in /dcupl-data and add your apiKey
• Change the project ID in dcupl.config.json to the one of your new project

Watch our videos for a quick start - https://docs.dcupl.com/docs/getting-started/overview/#videos

The page http://localhost:3000/index.vue imports the data from products.ts and does not use /dcupl-data. dcupl model and dcupl data is set in the source of the page.

SDK Version

The SDK Version is currently set to 1.0.0 in the package.json of the main project. Please read the docs - https://docs.dcupl.com

open tasks

• finish autocompletion
• configure fn.suggest (lowercase, ...)
• lookup and show results based on suggestion (/load from dcupl)
• add new attribute to Style model with expression => suggestions based on various attributes
• error handling / catch exceptions

Production

Build the application for production:

npm run build

Locally preview production build:

npm run preview

Check out the deployment documentation for more information.