https://github.com/hadihammurabi/vrontend

Web frontend using Vue
https://github.com/hadihammurabi/vrontend

vite vue zero-configuration

Last synced: 9 days ago
JSON representation

Web frontend using Vue

• Host: GitHub
• URL: https://github.com/hadihammurabi/vrontend
• Owner: hadihammurabi
• Created: 2023-08-03T02:30:14.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-08-10T04:42:11.000Z (over 1 year ago)
• Last Synced: 2024-11-07T08:39:01.244Z (about 2 months ago)
• Topics: vite, vue, zero-configuration
• Language: Vue
• Homepage:
• Size: 220 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vrontend

Web frontend using Vue

> This boiller plate made for convenient preparation while

> starting new project.

# Table Of Contents

1. Usage

    * Getting Started

    * Directory Structure

2. Tech Stack

    * List

    * Auto Import

# Usage

## Getting Started

1. Clone the repository

```

git clone https://github.com/hadihammurabi/vrontend.git

```

2. Go to project directory

```

cd vrontend

```

3. Install dependencies needed

```

yarn

```

4. Start the dev server

```

yarn dev

```

## Directory Structure



# Tech Stack

## List

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

## Auto Import

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:

```vue

const route = useRoute();

const fullPath = ref('');

onMounted(() => {

  fullPath.value = route.fullPath;

});

  {{ fullPath }} Me

```