Jamstack (MPA-SSG) app for an wildlife welfare/charity organization that helps endangered species by educating the community, and running various volunteering programs. While layouts, pages & components are primarily Vue SFCs, the project also includes svelte and jsx/tsx components. Note: Iles supports component formats of multiple frameworks.

This is a sample project created using the Vue Designer Iles Tailwind CSS – Quick start template.

Demo – https://spotted-kingfisher-iles-tailwindcss.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/spotted-kingfisher-with-iles-tailwindcss my-spotted-kingfisher-with-iles-tailwindcss-app #project-name
cd my-spotted-kingfisher-with-iles-tailwindcss-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 # SPA during development

npm run build # MPA SSG (islands architecture)

Uncomment the rollup-plugin-visualizer usage in your config file and execute the build command. This command will generate stats.html. Open stats.html in your browser to analyze bundle sizes.

npm run build # open stats.html to analyze bundle sizes

npm run now # build & preview

npm run unlighthouse # Uses npx unlighthouse from https://unlighthouse.dev/ to run lighthouse on entire site (all pages)

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.

• îles – A Joyful Site Generator.
  • 🏝 [Partial Hydration] – zero JS by default, hydrates the interactive bits
  • 🔌 [Batteries Included] – layouts, components, site-wide data
  • 🧱 [Multi-Framework] – vue, preact, svelte, solid
  • 📖 [Markdown] – use components in markdown and viceversa
  • 🛣 [Routing] – automatically configured from files
  • 🛠 [Devtools][devtools] – debug panel and [hydration timeline]
  • ⚡️ [Fast][vite] – instant reloading powered by [Vite]

• Tailwind CSS – The amazing utility-first CSS framework.

• @islands/mdx – file-based CMS powered by Markdown & Vue components. This module is shipped inside îles. Note: This page is a markdown file 🗒.
• @islands/prism – an îles module that injects a remark plugin to provide syntax highlighting for MDX documents.

• UnoCSS Preset Icons – use over 100,000 open-source Iconify icons. Uses the unocss format for icon names, for example, i-mdi-home.

• Pinegrow îles Module – enables you to live-design your Vue single-file components visually in Vue Designer.
• Pinegrow Tailwind CSS Plugin – via Design Panel, enables visual controls customization (automatic) and theme customization (optional).
• @islands/pages – enables file-based routing, hooks to extend frontmatter and route data, supports a block in Vue single-file components for meta-data. This module is shipped inside îles.
• 📲 unplugin-vue-components – On-demand components auto importing for Vue.
• 📲 unplugin-auto-import – Auto import APIs on-demand for Vite, Webpack and Rollup.
• VueUse – collection of essential Vue composition utilities.
• 🍍 Pinia stores for global state management. Its light-weight, type-safe, extensible, modular with vue-devtools support.
• VeeValidate takes care of value tracking, validation, errors, submissions and more.

• îles Devtools – Page information is available in the in-app debug panel (similar to Vitepress). Also access the “Islands” inspector in Vue devtools.
• Vite Devtools – A Vite plugin for Vue that enhances your DX (developer experience) with an amazing set of in-app features. This is an in-app alternative to browser-based/standalone Vue Devtools.
• Vue Devtools – Official devtools that can be used as a standalone app alongside Vue Designer. It’s conditionally configured in app.ts (only during development).
  • ACTION REQUIRED: Currently deactivated. In app.ts, uncomment the top devtools related snippet to activate.

• [VS Code Extensions](./.vscode/extensions.json & ./.vscode/settings.json)
  • Volar – Vue 3 <script setup> IDE support
  • ESLint
  • Prettier

• Use Composition API with <script setup> SFC syntax
• ESLint with @nuxt/eslint-config – opinionated not-so-strict set of linting rules. Nuxt & îles share a similar directory structure, so are their 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.

{
  "compilerOptions": {
    // ...
    "strict": false,
    "allowJs": true
  }
}

• Vue Designer Community