Web frontend using Vue
This boiller plate made for convenient preparation while starting new project.
- Usage
- Getting Started
- Directory Structure
- Tech Stack
- List
- Auto Import
- Clone the repository
git clone https://github.com/hadihammurabi/vrontend.git
- Go to project directory
cd vrontend
- Install dependencies needed
yarn
- Start the dev server
yarn dev
![image](https://private-user-images.githubusercontent.com/16364286/258142860-c9f9860d-b68e-45c8-8484-104730ef331b.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk5NzYzNTMsIm5iZiI6MTcxOTk3NjA1MywicGF0aCI6Ii8xNjM2NDI4Ni8yNTgxNDI4NjAtYzlmOTg2MGQtYjY4ZS00NWM4LTg0ODQtMTA0NzMwZWYzMzFiLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MDMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzAzVDAzMDczM1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTI1ZDNhMjJhOTZiZmRhNDIxYTY3YmNmZDY3NTBjZjk3YjdiOGMxMjllYjMzY2IxZTAwN2EyMjRjYjNmZmRkNTEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.owfZMKlRZup4ZJ2m0EPPJWT28ZzZxzXXFmDdGEFWbpI)
This template includes utilities bellow.
Name | Description |
---|---|
Vue | Library/framework to do DOM manipulation |
Vue Router | Library to do client-side routing (use history mode by default) |
PrimeVue | Component library that have most of things needed |
Axios | HTTP client to do network communication |
Several functions/components are auto-imported using:
unplugin-auto-import/vite
unplugin-vue-components/vite
Here specific things registered to be auto-imported.
vue
vue-router
./src/composable
./src/component
./src/page
This configuration increase productivity because we no need to do import commont things any more. We can use it directly.
Example:
<script lang="ts" setup>
const route = useRoute();
const fullPath = ref('');
onMounted(() => {
fullPath.value = route.fullPath;
});
</script>
<template>
{{ fullPath }} Me
</template>