https://github.com/n-ignacio-bouffanais/vue-api-client
Vue API-client build with Typescript, axios, vuejs and pinia.
https://github.com/n-ignacio-bouffanais/vue-api-client
async-await axios-vue menuresponsive pinia protected-routes typescript vue-router4
Last synced: 2 months ago
JSON representation
Vue API-client build with Typescript, axios, vuejs and pinia.
- Host: GitHub
- URL: https://github.com/n-ignacio-bouffanais/vue-api-client
- Owner: N-Ignacio-Bouffanais
- Created: 2023-01-06T18:45:07.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-01-17T04:12:56.000Z (over 2 years ago)
- Last Synced: 2024-04-23T21:31:42.121Z (about 1 year ago)
- Topics: async-await, axios-vue, menuresponsive, pinia, protected-routes, typescript, vue-router4
- Language: Vue
- Homepage:
- Size: 89.8 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue 3 + TypeScript + Vite
- This is a Client-api build with Vue3.
## Tecnologies that I used
- Typescript
- Vue3 with Vue-router version 4
- SASS
- Pinia and plugin(pinia-plugin-persistedstate) to persist the state
- Axios with async await
## Screenshot
## Axios with Vuejs Composition API example
```ts
import axios from "axios";
import { ref } from "vue"
let email = ref("")
let password = ref("")
const HandleSubmit = async () => {
const res = await axios.post("http://localhost:3000/auth/login",{
email: email.value,
password:password.value
})
console.log(res)
console.log(res.data.token)
}
```
```html
Save
```
## How Protect routes with Vue-router-4 and pinia
```ts
import { createRouter, createWebHistory } from "vue-router";
import { useAuthStore } from "../store/auth.state";
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: "/login",
name: "Login",
component: () => import("../views/LoginView.vue"),
},
{
path: "/compras",
name: "Compras",
component: () => import("../views/Comprasview.vue"),
meta: { requiresAuth: true },
},
],
});
router.beforeEach((to,from)=> {
const main = useAuthStore()
if (to.meta.requiresAuth && !main.isAllowed) {
// this route requires auth, check if logged in
// if not, redirect to login page.
return {
path: "/login",
// save the location we were at to come back later
query: { redirect: to.fullPath },
};
}
})
export default router;
```
## Menu responsive with Sass, Vuejs Composition API(ref)
```ts
import { ref } from "vue";
let active = ref(false);
```
```html
```
```scss
.menu {
display: none;
a {
color: white;
font-size: 1.6rem;
margin-left: 1vw;
font-weight: 500;
display: flex;
align-items: center;
}
}
@media (max-width: 1100px) {
.navigation {
.menu {
a {
justify-content: center;
margin: 3rem auto;
color: white;
font-size: 2rem;
&:active {
color: #0071dc;
}
}
display: block;
.checkbtn {
display: block;
cursor: pointer;
}
.show {
left: -100%;
}
ul {
position: fixed;
width: 100%;
height: 100vh;
background-color: #2f3640;
top: 11rem;
left: 0;
transition: all .5s;
li {
display: block;
}
}
}
}
}
```