Learn How To Create, Test and Deploy a Single Page App With Vue 3 + Vite and Pinia | by Andrei Rusu | Feb, 2022

vue-bookstore/
├── public/
| ├── favicon.ico
├── src/
| ├── property/
| | └── emblem.png
| ├── parts/
| | └── HelloWorld.vue
| ├── App.vue
| └── essential.js
├─── package deal.json
├─── README.md
└─── vite.config.js
$ npm set up vue-router@4 --save
$ npm set up pinia --save

What’s a Single Web page Software?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<hyperlink rel="icon" href="/favicon.ico" />
<meta title="viewport" content material="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<physique>
<div id="app"></div>
<script sort="module" src="/src/essential.js"></script>
</physique>
</html>
import  createApp  from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

src/
├── parts/
| └── TopNavbar.js
├── lib/
| ├── router.js
| └── retailer.js
├── pages/
| ├── cart/
| | ├── cart.css
| | ├── cart.html
| | └── Cart.vue
| ├── house/
| | ├── house.css
| | ├── house.html
| | └── House.vue
| ├── sign-in/
| | ├── sign-in.css
| | ├── sign-in.html
| | └── SignIn.vue
| └── routes.js
├── App.vue
└── essential.js
<script setup>
import TopNavbar from '../../parts/TopNavbar.vue';
</script>
<template>
<TopNavbar />
</template>
<model></model>
<script>
export default
parts:
TopNavbar
,
computed: ,

mounted()
,

information()
return
;
,
;
</script>

<template>
<router-link to="/">House</router-link>
<router-link to="/cart/">Cart</router-link>
<router-link to="/sign-in/">Signal In</router-link>
</template>
import createRouter from 'vue-router'
import Homepage from './house/House.vue';
import SignIn from './sign-in/SignIn.vue';
import Cart from './cart/Cart.vue';
const routes = [

path: '/',
component: Homepage
,

path: '/sign-in/',
component: SignIn
,

path: '/cart/',
component: Cart
,
]
export default perform (historical past)
return createRouter(
historical past,
routes
)
import  createApp  from 'vue'
import createWebHistory from 'vue-router'
import createRouter from './pages/routes.js'
import App from './App.vue'
const router = createRouter(createWebHistory())
const app = createApp(App)
app.use(router).mount('#app')
<template>
<router-view></router-view>
</template>

Making a Pinia

import  createApp  from 'vue'
import createWebHistory from 'vue-router'
import createPinia from 'pinia'
import createRouter from './pages/routes.js'
import App from './App.vue'
const retailer = createPinia()
const router = createRouter(createWebHistory())
const app = createApp(App)
app.use(router).use(retailer).mount('#app')
import  defineStore  from 'pinia'export const useCatalog = defineStore('catalog-store', 
state: () =>
return
newArrivals: [],
fetching: false

,
getters:
outcomes(state)
return state.newArrivals;
,
isFetching(state)
return state.fetching;

,
actions:
async fetchNewArrivals()
this.fetching = true;
const response = await fetch('/information/new-arrivals.json');
attempt
const consequence = await response.json();
this.newArrivals = consequence.books;
catch (err)
this.newArrivals = [];
console.error('Error loading new arrivals:', err);
return err;
this.fetching = false;


)
<script setup>
import useCatalog from '../../retailer/catalog.js'
</script>
<template></template><model scoped></model>
<script>
import mapState, mapActions from 'pinia'
export default
computed:
...mapState(useCatalog, newArrivals: 'outcomes')
,
strategies:
...mapActions(useCatalog, ['fetchNewArrivals']),
addToCart()
// we'll populate this later

,
created()
// when the template is created, we name this motion
this.fetchNewArrivals();

;
</script>
<script setup>
import TopNavbar from '../../parts/TopNavbar.vue';
import NewArrivals from '../../parts/NewArrivals.vue';
</script>
<template>
<TopNavbar />
<NewArrivals />
</template>
<model></model><script>
export default
parts:
TopNavbar,
NewArrivals
,
computed: ,
mounted() ,
information()
return ;
,
;
</script>

More Posts