Ship a beautiful, interactive, mobile-friendly website for your business by simply talking to ChatGPT (AI art generated with DALL-E) using Vue Designer.
This is a sample project created using the VuCommerce Store - Vue Designer Nuxt TailwindCSS Template
Demo - https://lambent-florentine-6e51ca.netlify.app//
A desktop visual editor for Vue apps supporting Mac, Windows, and Linux by Pinegrow. Take it for a free trial at Vue Designer!
It lets you visually design 🎨 your Vue single file components and boosts your productivity and creativity while building your component-based Vue apps.
It smartly integrates with your ⚡️ Vite based CLI and provides an amazing developer experience with its powerful visual controls and features.
Clean code 😃, No lock-in - You are in control of your projects and development workflow ❤️
Create a repo from this template on GitHub.
(or)
If you prefer to do it manually with the cleaner git history
npx giget@latest gh:pinegrow/the-ai-cafe my-ai-cafe-app #project-name
cd my-ai-cafe-app
npm install #or use pnpm
(or)
If you prefer a blank template (a single empty home page) instead,
npx giget@latest gh:pinegrow/the-ai-cafe#blank my-ai-cafe-app #project-name
cd my-ai-cafe-app
npm install #or use pnpm
Open your project in Vue Designer and follow the instructions displayed in the Config Panel (that should pop out automatically). Config Panel ⚙️ displays the key packages and the various links to their individual ecosystems and communities.
npm run dev
npm run now # build & preview
npm run unlighthouse # Uses npx unlighthouse from https://unlighthouse.dev/ to run lighthouse on entire site (all pages)
npm run build # SPA SSR
npm run generate # SPA SSG (full-static)
And you will see the generated file in dist
that's ready to be served.
You can deploy this repo as a site on your own to explore and experiment with, by clicking this button.
Check out the deployment documentation for more information.
- Nuxt - The Intuitive Vue Framework
- 👉 Follow the Nuxt docs for the amazing list of features.
- 🚦 Nuxt-Router, based on the official Vue-Router and enables file-based routing.
- SSR friendly
useState
composable to share state across components.
-
Vuetify - Hundreds of beautifully handcrafted Vue components, easily customizable with a powerful set of utilities, composables and directives. 👉 Note: This template turns off Vuetify utilities, and instead use Tailwind CSS instead for styling.
-
Tailwind CSS - The amazing utility-first CSS framework. 👉 Note: This template turns off Vuetify utilities, and instead use Tailwind CSS instead for styling. In order to resolve Vuetify's !important in default theme, tailwind.config.ts includes the
important: true
setting. -
Nuxt Vuetify Module - This zero-config Nuxt module helps you set up Vuetify in your Nuxt application in seconds. Provides an amazing abstraction over the necessary setup enabling automatic tree-shaking, ability to use Pure CSS icons (UnoCSS Preset icons), supports Nuxt layers and hooks, and more...
- 👉 provides a new icon-set for Vuetify called
unocss-mdi
. In order to use all iconsets in Vue Designer's icon-picker, follow the instructions displayed in Vue Designer's Config Panel under the Icon Picker tab. Also refer to the nuxt module's official documentation here.
- 👉 provides a new icon-set for Vuetify called
- Nuxt Content - file-based CMS powered by Markdown & Vue components. Note: This page is a markdown file 🗒.
- UnoCSS Preset Icons - use over 100,000 open-source Iconify icons. Uses the unocss format for icon names, for example,
i-mdi-home
. Note: The above Nuxt Vuetify module easily integrates UnoCSS Preset Icons into your Vuetify components with no effort.
- Pinegrow Nuxt Module - enables you to live-design your Vue single-file components visually in Vue Designer.
- Pinegrow Vuetify Plugin - via Design Panel, enables theme customization (optional) and visual controls for Vuetify utilities. Note: This is an addon that's licensed separately to Pinegrow apps (like Vue Designer).
- VueUse - collection of essential Vue composition utilities.
- 🍍 Pinia stores for global state management via the
@pinia/nuxt module
. Its light-weight, type-safe, extensible, modular with vue-devtools support. - VeeValidate takes care of value tracking, validation, errors, submissions and more.
- Nuxt Image - Plug-and-play image optimization for Nuxt apps.
- Nuxt SEO - Amazing collection of hand-crafted Nuxt Modules for all SEO needs with a unified site config. Includes
nuxt-site-config
,nuxt-simple-robots
,nuxt-simple-sitemap
,nuxt-og-image
,nuxt-link-checker
,nuxt-seo-experiments
,nuxt-schema-org
.
- Nuxt Devtools - Enhance your DX (developer experience) with an amazing set of in-app features.
- ACTION REQUIRED: Currently deactivated. In
nuxt.config.ts
, uncomment module to activate.
- ACTION REQUIRED: Currently deactivated. In
- Vue Devtools - Official devtools that can be used as a standalone app alongside Vue Designer. It's configured as a Nuxt plugin (only during development).
- ACTION REQUIRED: Currently deactivated. In
plugins/devtools.client.ts
, uncomment to activate.
- ACTION REQUIRED: Currently deactivated. In
- [VS Code Extensions](./.vscode/extensions.json & ./.vscode/settings.json)
- Use Composition API with
<script setup>
SFC syntax - ESLint with @nuxt/eslint-config - opinionated not-so-strict set of linting rules.
- Prettier with eslint-config-prettier - format without conflicting with eslint rules.
This project allows JS, and strict mode is turned off. Update tsconfig.ts
as required.
{
// https://nuxt.com/docs/guide/concepts/typescript
"extends": "./.nuxt/tsconfig.json",
"compilerOptions": {
"allowJs": true,
"strict": false
}
}