Giter Site home page Giter Site logo

shyam-chen / vue-starter Goto Github PK

View Code? Open in Web Editor NEW
187.0 15.0 48.0 7.1 MB

:poodle: A boilerplate for web apps with Vue and Tailwind using TypeScript on Vite.

Home Page: https://vue-starter-6fa6.onrender.com

Vue 86.77% HTML 0.08% Dockerfile 0.06% TypeScript 13.09%
html5 render typescript vite vitest vue

vue-starter's Introduction

Vue Starter

🐩 A boilerplate for SPA Client with HTML5, Vue, and Tailwind on Vite.

🌈 View Demo: Live | Windows | macOS | Android | iOS

:octocat: Source Code: Web-side | Native-side | Server-side

Table of Contents

Getting Started

Prerequisites:

  • Node.js v20
  • PNPM v9

Get started with Vue Starter.

# install dependencies
$ pnpm install

# dev server (in one terminal)
$ pnpm dev

# mock server (in another terminal)
$ pnpm mock

Or use barebones scaffolding for your new Vue app

$ pnpm dlx degit Shyam-Chen/Starter-Templates/vue my-vue-app

Project Setup

Follow steps to execute this boilerplate.

Install dependencies

$ pnpm install

Compiles and hot-reloads for development

$ pnpm dev

Mock APIs during development

$ pnpm mock

Compiles and minifies for production

$ pnpm build

Locally preview the production build

$ pnpm preview

Lints and fixes files

Biome CLI

$ pnpm biome check --apply ./app ./ui ./mock ./e2e

Check types

$ pnpm check

Runs unit tests

$ pnpm test

Runs end-to-end tests

$ pnpm e2e

Key Features

This seed repository provides the following features:

Configuration

Control the environment.

Default environments

Set your local environment variables.

// vite.config.ts
  define: envify({
    API_URL: process.env.API_URL || '',
  }),

Continuous integration environments

Add environment secrets to the GitHub Actions workflow.

DEPLOY_HOOK=xxx

Continuous delivery environments

Add environment variables to the Render build.

API_URL=xxx

Directory Structure

The structure follows the LIFT Guidelines.

.
β”œβ”€β”€ .github/workflows/ci.yml
β”œβ”€β”€ app
β”‚   β”œβ”€β”€ public
β”‚   β”œβ”€β”€ src
β”‚   β”‚   β”œβ”€β”€ assets
β”‚   β”‚   β”œβ”€β”€ components
β”‚   β”‚   β”œβ”€β”€ composables
β”‚   β”‚   β”œβ”€β”€ layouts
β”‚   β”‚   β”œβ”€β”€ locales
β”‚   β”‚   β”œβ”€β”€ middleware
β”‚   β”‚   β”œβ”€β”€ plugins
β”‚   β”‚   β”œβ”€β”€ routes
β”‚   β”‚   β”œβ”€β”€ utilities
β”‚   β”‚   β”œβ”€β”€ workers
β”‚   β”‚   β”œβ”€β”€ App.vue
β”‚   β”‚   β”œβ”€β”€ main.ts
β”‚   β”‚   └── shims.d.ts
β”‚   β”œβ”€β”€ index.html
β”‚   β”œβ”€β”€ package.json
β”‚   β”œβ”€β”€ tsconfig.json
β”‚   └── vite.config.ts
β”œβ”€β”€ docs -> Write documentation with VitePress
β”‚   β”œβ”€β”€ .vitepress
β”‚   β”œβ”€β”€ index.md
β”‚   β”œβ”€β”€ package.json
β”‚   └── vite.config.ts
β”œβ”€β”€ e2e -> End-to-end testing of web pages
β”‚   β”œβ”€β”€ src
β”‚   β”œβ”€β”€ package.json
β”‚   β”œβ”€β”€ playwright.config.ts
β”‚   └── tsconfig.json
β”œβ”€β”€ infra -> Infrastructure as code
β”‚   β”œβ”€β”€ src
β”‚   β”œβ”€β”€ package.json
β”‚   β”œβ”€β”€ Pulumi.yaml
β”‚   └── tsconfig.json
β”œβ”€β”€ mock -> Mock backend API
β”‚   β”œβ”€β”€ src
β”‚   β”œβ”€β”€ package.json
β”‚   β”œβ”€β”€ tsconfig.json
β”‚   └── vite.config.ts
β”œβ”€β”€ ui -> Design system
β”‚   β”œβ”€β”€ src
β”‚   β”œβ”€β”€ package.json
β”‚   β”œβ”€β”€ tsconfig.json
β”‚   └── vite.config.ts
β”œβ”€β”€ .editorconfig
β”œβ”€β”€ .eslintrc
β”œβ”€β”€ .gitignore
β”œβ”€β”€ .prettierrc
β”œβ”€β”€ biome.json
β”œβ”€β”€ Caddyfile
β”œβ”€β”€ compose.yaml
β”œβ”€β”€ Dockerfile
β”œβ”€β”€ package.json
β”œβ”€β”€ pnpm-lock.yaml
β”œβ”€β”€ pnpm-workspace.yaml
β”œβ”€β”€ README.md
└── render.yaml

vue-starter's People

Contributors

shyam-chen avatar yuniel-acosta avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vue-starter's Issues

Incorrect Display of Select Options within Popover Component

Description

When the Select component is nested within the Popover component, there is a display issue where the options dropdown appears misaligned. This misalignment occurs due to the improper calculation of the top position, failing to account for the offset of the parent element.

Screenshot 2024-03-20 at 08 25 32

Steps to Reproduce:

  1. Create a Popover component.
  2. Embed a Select component within the Popover.
  3. Trigger the Popover to display.
  4. Observe the misalignment of the options dropdown within the Select component.

Expected Behavior:
The options dropdown within the Select component should align properly within the boundaries of the Popover, considering the offset of the parent element.

Additional Information:
This issue affects the usability and aesthetics of components utilizing both Select and Popover functionalities. Proper alignment is crucial for a seamless user experience.

When I refresh the page, I get a 404 error.

Hello, I'm currently facing an issue with your project. After running "pnpm build" and placing the resulting "dist" files into nginx, I noticed that whenever I refresh the page, I get a 404 error. I'm not sure which step I may have missed in the setup. I would appreciate your response. Thank you very much.

Failed to resolve import +layout.vue file

Hello, last time I received your assistance, and I'm very grateful for that.

Currently, one of my colleagues has joined the development team, but he's using Windows 11 for development.
He's encountering an issue where, every time he runs 'pnpm dev' and opens the browser, he encounters the following error.
I've tried several times but haven't been able to resolve it.

So, I decided to directly download the project you have on GitHub and ran 'pnpm i' and 'pnpm dev.'
Unfortunately, we still face the same error.
Have you come across a similar issue or do you know how to resolve this problem?

I'm sorry to trouble you again, and thank you.

[vite] Internal server error: Failed to resolve import "src/routes/(portal)/+layout.vue" from "virtual:vue-routes". Does the file exist?
Plugin: vite:import-analysis
File: virtual:vue-routes:4:31
2 | {
3 | "path": "src/routes/+",
4 | "component": () => import('src/routes/(portal)/+layout.vue'),
| ^
5 | "children": [
6 | {
at formatError (file:///E:/codespaces/Vue-Starter/node_modules/.pnpm/vite@4.5.0_@types[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:44062:46)
at TransformContext.error (file:///E:/codespaces/Vue-Starter/node_modules/.pnpm/vite@4.5.0_@types[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:44058:19)
at normalizeUrl (file:///E:/codespaces/Vue-Starter/node_modules/.pnpm/vite@4.5.0_@types[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:41844:33)
at async file:///E:/codespaces/Vue-Starter/node_modules/.pnpm/vite@4.5.0_@types[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:41998:47
at async Promise.all (index 0)
at async TransformContext.transform (file:///E:/codespaces/Vue-Starter/node_modules/.pnpm/vite@4.5.0_@types[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:41914:13)
at async Object.transform (file:///E:/codespaces/Vue-Starter/node_modules/.pnpm/vite@4.5.0_@types[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:44352:30)
at async loadAndTransform (file:///E:/codespaces/Vue-Starter/node_modules/.pnpm/vite@4.5.0_@types[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:55026:29)
at async viteTransformMiddleware (file:///E:/codespaces/Vue-Starter/node_modules/.pnpm/vite@4.5.0_@types[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:64430:32) (x5)

`firebase serve --only functions --token $FIREBASE_TOKEN` fails with TypeError in container

firebase/firebase-tools#364
firebase/firebase-tools#647
firebase/firebase-tools#787


yarn run v1.6.0
$ firebase serve --only functions --port 5000 --token $FIREBASE_TOKEN

=== Serving from '/Vue-Fullstack-Starter'...

i  functions: Preparing to emulate functions.
Warning: You're using Node.js v8.11.3 but Google Cloud Functions only supports v6.11.5.
error: /Vue-Fullstack-Starter/node_modules/firebase-admin/lib/auth/credential.js:94
            throw new error_1.FirebaseAppError(error_1.AppErrorCodes.INVALID_CREDENTIAL, 'Failed to parse refresh token file: ' + error);
            ^

Error: Failed to parse refresh token file: Error: Refresh token must contain a "refresh_token" property.

Generate a blank project via Vue CLI

Vue Fullstack Starter is for practical examples.

$ yarn global add vue-cli
$ vue init Shyam-Chen/Vue-Fullstack-Template <PROJECT_NAME>
$ cd <PROJECT_NAME>
$ yarn install

# start
$ yarn start:app
$ yarn start:api

Automatically build images and push to Docker Cloud

Protecting environmental variables

# .gitignore

  .DS_Store
  node_modules
  npm
  public
  functions
  coverage
+ Dockerfile.dev
+ Dockerfile.prod
  *.log

Get from a private image

# docker-compose.yml

  <dev|prod>:
-   image: <dev|prod>
-   build:
-     context: .
-     dockerfile: tools/Dockerfile.<dev|prod>
+   image: <DOCKER_ID_USER>/<IMAGE_NAME>:<IMAGE_TAG>
    volumes:
      - yarn:/home/node/.cache/yarn
    tty: true

Build images and push to Docker Cloud

# release.sh

#!/bin/sh

set -e

echo "Q1. ENV?"
read ENV

echo "Q2. IMAGE_NAME?"
read IMAGE_NAME

echo "Q3. IMAGE_TAG?"
read IMAGE_TAG

echo "Q4. DOCKER_ID_USER?"
read DOCKER_ID_USER

docker build -f tools/Dockerfile.$ENV -t $IMAGE_NAME:$IMAGE_TAG .

docker tag $IMAGE_NAME:$IMAGE_TAG $DOCKER_ID_USER/$IMAGE_NAME:$IMAGE_TAG
docker push $DOCKER_ID_USER/$IMAGE_NAME:$IMAGE_TAG

First install, mock starting error

Fresh clone repository, on Windows 11 system

  • pnpm i
  • pnpm dev
  • pnpm mock

Error:

> @ mock PS D:\labs\Vue-Starter> 
> cd mock && pnpm mock

> vite

  VITE v5.1.3  ready in 271 ms

  ➜  Local:   http://127.0.0.1:3000/
  ➜  press h + enter to show help
11:51:34 [vite] warning: 
virtual:fastify-routes
2  |  export default (app, opts) => {
3  |    const { prefix } = opts;
4  |    app.register(async (app) => {app.register(import('D:\labs\Vue-Starter\mock\src\routes\user-list\+handler.ts'), { prefix: prefix + '/user-list' });app.register(import('D:\labs\Vue-Starter\mock\src\routes\todos\+handler.ts'), { prefix: prefix + '/todos' });app.register(import('D:\labs\Vue-Starter\mock\src\routes\suggestions\+handler.ts'), { prefix: prefix + '/suggestions' });app.register(import('D:\labs\Vue-Starter\mock\src\routes\user-list\[id]\+handler.ts'), { prefix: prefix + '/user-list/:id' });app.register(import('D:\labs\Vue-Starter\mock\src\routes\todos\[id]\+handler.ts'), { prefix: prefix + '/todos/:id' });app.register(import('D:\labs\Vue-Starter\mock\src\routes\auth\user\+handler.ts'), { prefix: prefix + '/auth/user' });app.register(import('D:\labs\Vue-Starter\mock\src\routes\auth\sign-in\+handler.ts'), { prefix: prefix + '/auth/sign-in' });app.register(import('D:\labs\Vue-Starter\mock\src\routes\auth\otp\validate\+handler.ts'), { prefix: prefix + '/auth/otp/validate' });});
   |                                                     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
5  |  };
6  |
The above dynamic import cannot be analyzed by Vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

  Plugin: vite:import-analysis
  File: virtual:fastify-routes
11:51:34 [vite] warning:
virtual:fastify-routes
2  |  export default (app, opts) => {
3  |    const { prefix } = opts;
4  |    app.register(async (app) => {app.register(import('D:\labs\Vue-Starter\mock\src\routes\user-list\+handler.ts'), { prefix: prefix + '/user-list' });app.register(import('D:\labs\Vue-Starter\mock\src\routes\todos\+handler.ts'), { prefix: prefix + '/todos' });app.register(import('D:\labs\Vue-Starter\mock\src\routes\suggestions\+handler.ts'), { prefix: prefix + '/suggestions' });app.register(import('D:\labs\Vue-Starter\mock\src\routes\user-list\[id]\+handler.ts'), { prefix: prefix + '/user-list/:id' });app.register(import('D:\labs\Vue-Starter\mock\src\routes\todos\[id]\+handler.ts'), { prefix: prefix + '/todos/:id' });app.register(import('D:\labs\Vue-Starter\mock\src\routes\auth\user\+handler.ts'), { prefix: prefix + '/auth/user' });app.register(import('D:\labs\Vue-Starter\mock\src\routes\auth\sign-in\+handler.ts'), { prefix: prefix + '/auth/sign-in' });app.register(import('D:\labs\Vue-Starter\mock\src\routes\auth\otp\validate\+handler.ts'), { prefix: prefix + '/auth/otp/validate' });});
   |                                                                                                                                                                                               
                                                                                                                                                                                                   
                                      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
5  |  };
6  |
The above dynamic import cannot be analyzed by Vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

  Plugin: vite:import-analysis
  File: virtual:fastify-routes
11:51:34 [vite] warning:
virtual:fastify-routes
2  |  export default (app, opts) => {
3  |    const { prefix } = opts;
4  |    app.register(async (app) => {app.register(import('D:\labs\Vue-Starter\mock\src\routes\user-list\+handler.ts'), { prefix: prefix + '/user-list' });app.register(import('D:\labs\Vue-Starter\mock\src\routes\todos\+handler.ts'), { prefix: prefix + '/todos' });app.register(import('D:\labs\Vue-Starter\mock\src\routes\suggestions\+handler.ts'), { prefix: prefix + '/suggestions' });app.register(import('D:\labs\Vue-Starter\mock\src\routes\user-list\[id]\+handler.ts'), { prefix: prefix + '/user-list/:id' });app.register(import('D:\labs\Vue-Starter\mock\src\routes\todos\[id]\+handler.ts'), { prefix: prefix + '/todos/:id' });app.register(import('D:\labs\Vue-Starter\mock\src\routes\auth\user\+handler.ts'), { prefix: prefix + '/auth/user' });app.register(import('D:\labs\Vue-Starter\mock\src\routes\auth\sign-in\+handler.ts'), { prefix: prefix + '/auth/sign-in' });app.register(import('D:\labs\Vue-Starter\mock\src\routes\auth\otp\validate\+handler.ts'), { prefix: prefix + '/auth/otp/validate' });});
   |                                                                                                                                                                                               
                                                                                                                                                                                                   
                                                                                                                                                                                                   
                                                                                                       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
5  |  };
6  |
The above dynamic import cannot be analyzed by Vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

  Plugin: vite:import-analysis
  File: virtual:fastify-routes
11:51:34 [vite] Pre-transform error: Bad character escape sequence, expected 4 hex characters
11:51:34 [vite] Error when evaluating SSR module /src/plugins/router.ts: failed to import "virtual:fastify-routes"
|- RollupError: Bad character escape sequence, expected 4 hex characters
    at getRollupEror (file:///D:/_LAB/labs/Vue-Starter/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:375:41)
    at convertProgram (file:///D:/_LAB/labs/Vue-Starter/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:1012:26)
    at parseAstAsync (file:///D:/_LAB/labs/Vue-Starter/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:2158:12)
    at async ssrTransformScript (file:///D:/_LAB/labs/Vue-Starter/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:54036:15)
    at async loadAndTransform (file:///D:/_LAB/labs/Vue-Starter/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:53632:11)

11:51:34 [vite] Error when evaluating SSR module D:\labs\Vue-Starter\mock\src\app.ts: failed to import "/src/plugins/router.ts"
|- RollupError: Bad character escape sequence, expected 4 hex characters
    at getRollupEror (file:///D:/_LAB/labs/Vue-Starter/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:375:41)
    at convertProgram (file:///D:/_LAB/labs/Vue-Starter/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:1012:26)
    at parseAstAsync (file:///D:/_LAB/labs/Vue-Starter/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:2158:12)
    at async ssrTransformScript (file:///D:/_LAB/labs/Vue-Starter/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:54036:15)
    at async loadAndTransform (file:///D:/_LAB/labs/Vue-Starter/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:53632:11)

node:internal/process/promises:289
            triggerUncaughtException(err, true /* fromPromise */);
            ^

Error [RollupError]: Bad character escape sequence, expected 4 hex characters
    at getRollupEror (file:///D:/_LAB/labs/Vue-Starter/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:375:41)
    at convertProgram (file:///D:/_LAB/labs/Vue-Starter/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:1012:26)
    at parseAstAsync (file:///D:/_LAB/labs/Vue-Starter/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:2158:12)
    at async ssrTransformScript (file:///D:/_LAB/labs/Vue-Starter/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:54036:15)
    at async loadAndTransform (file:///D:/_LAB/labs/Vue-Starter/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:53632:11) {
  code: 'PARSE_ERROR',
  pos: 155
}

Node.js v20.7.0
 ELIFECYCLE  Command failed with exit code 1.
 ELIFECYCLE  Command failed with exit code 1.
PS D:\labs\Vue-Starter> 

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.