setup vue js app

setup_vue_app.sh

#!/bin/bash

# Prompt the user for the application name
echo "Enter your application name:"
read APP_NAME

# Determine file extension for Vue.js with TypeScript
FILE_EXTENSION=".vue"

# Initialize the Vite app using the specified name with the Vue TypeScript template
yarn create vite $APP_NAME --template vue-ts

# Navigate into the project directory
cd $APP_NAME

# Install required Vue-specific dependencies with Yarn
yarn add axios tailwindcss @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 vue-good-table vue-api-query sweetalert2 vue-router@next @vueuse/core vuex@next

# Explicitly create Tailwind and PostCSS config files inside the app directory
yarn tailwindcss init -p

# Set up the desired project directory structure for Vue
DIRECTORIES=(
  "src/assets/images"
  "src/assets/styles"
  "src/components/common"
  "src/components/auth"
  "src/components/users"
  "src/components/contacts"
  "src/components/settings"
  "src/views"
  "src/router"
  "src/store/modules"
)

for dir in "${DIRECTORIES[@]}"; do
  mkdir -p $dir
done

# Create Vue-specific component and view files
VUE_FILES=(
  "src/components/common/WelcomeNavbar"
  "src/components/common/WelcomeFooter"
  "src/components/common/DashboardNavbar"
  "src/components/common/DashboardSideBar"
  "src/components/common/DashboardFooter"
  "src/components/auth/Login"
  "src/components/auth/Register"
  "src/components/auth/ForgotPassword"
  "src/components/auth/ResetPassword"
  "src/components/auth/VerifyAccount"
  "src/components/users/UsersList"
  "src/components/users/AddUser"
  "src/components/users/EditUser"
  "src/components/users/RoleAbilities"
  "src/components/contacts/ContactList"
  "src/components/contacts/ContactDetail"
  "src/components/contacts/AddContact"
  "src/components/contacts/EditContact"
  "src/components/settings/ManageContactCategories"
  "src/components/settings/ManageOrganizationCategories"
  "src/components/settings/ManageSystemSettings"
  "src/views/Welcome"
  "src/views/Dashboard"
  "src/views/Unauthorized"
  "src/views/NotFound"
  "src/views/Error"
)

for file in "${VUE_FILES[@]}"; do
  touch $file$FILE_EXTENSION
done

# TypeScript specific files
TS_FILES=(
  "src/router/index.ts"
  "src/store/index.ts"
  "src/store/modules/auth.ts"
  "src/store/modules/rolesAndAbilities.ts"
  "src/store/modules/contacts.ts"
)

for file in "${TS_FILES[@]}"; do
  touch $file
done

# Run the Yarn commands inside the project directory
yarn install
yarn dev

echo "Project setup completed and the development server is running. Open your browser and navigate to the displayed URL to view your Vue application."