vue3 {initial projects->vue-router) BASE!!

 initial projects

npm init vite@5.5.2 project_name

vite.config.js
import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
  },
})

===========================================
ref

vue3: ref & reactive
Let's dive into how to use ref in Vue 3, particularly within the Composition API.
In Vue 3, ref is a function that creates a reactive reference to a value. This is particularly useful for primitive values (like numbers, strings, etc.) and for objects that you want to make reactive. When you create a ref, you can access its value using the .value property.
Basic Usage of ref
Importing ref: First, you need to import ref from Vue:
import { ref } from 'vue';

Creating a Ref: You can create a ref by calling the ref function and passing an initial value:
const count = ref(0);

Accessing and Modifying the Value: You can access and modify the value of the ref using the .value property:
console.log(count.value); // 0
count.value++;
console.log(count.value); // 1
Using ref in a Component
const count = ref(0);
const increase = ()=>{
  count.value += 1;
}
<button type="button" @click="increase">count is {{ count }}</button>
Deep Reactivity
One of the powerful features of ref is that it provides deep reactivity for nested objects. For example:
const hero = ref({ name: 'Batman', powers: ['flight', 'strength'] });
console.log(hero.value.name); // Batman
hero.value.name = 'Superman'; // This will trigger reactivity

Differences Between ref and reactive
ref is used for primitive values and can also wrap objects. You access the value with .value.
reactive is used for creating a reactive object. You do not need to use .value to access properties.
Example of reactive:
import { reactive } from 'vue';

const state = reactive({
  count: 0,
});

state.count++; // This will trigger reactivity
use ref to manipulate DOM object
const titleRef = ref(null);

onMounted(() => {
  titleRef.value.style.color = 'red'; // Accessing the DOM element
});
<h1 ref="titleRef">My Title</h1>
===============================================
 router
vue-router
npm install vue-router@4
Step 2: Create the Router Instance
Create a new file for your router configuration. You can create a folder named router in the src directory and then create a file named index.js
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
    {
        path: '/',
        name: 'Home',
        component:  () => import("../views/Home.vue")
    },

    {
        path: '/about',
        name: 'About',
        component:  () => import("../views/About.vue"),
    },
    {
        path: "/:pathMatch(.*)*",
        name: "404",
        component: () => import("../views/404.vue"),
      },
];
const router = createRouter({ 
    history: createWebHistory(import.meta.env.BASE_URL), 
    routes, });

export default router;
Step 3: Create Views
Create the components that will be used as views. For example, create Home.vue and About.vue in the src/views directory.
<template>
    <h1>Home Page</h1>
</template>

<script setup>
</script>
<template>
    <h1>About Page</h1>
</template>

<script setup>
</script>
<template>
    <h1>404 - Not Found</h1>
</template>

<script setup>
</script>
Step 4: Use the Router in Your App
Now, you need to use the router in your main application file. Open src/main.js and import the router instance you created.
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');
Step 5: Add Router View
In your App.vue, add the <router-view> component where you want the routed components to be displayed.
import { RouterLink } from 'vue-router'
<template>
  <div>
	<nav>
      <ul>
        <li>
          <RouterLink to="/">Home</RouterLink>
        </li>
        <li>
          <RouterLink to="/about">About</RouterLink>
        </li>
      </ul>
    </nav>
    <router-view />
  </div>
  
</template>
=================================
import { fileURLToPath, URL } from "node:url";
import { resolve, dirname } from "node:path";
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  base: '/RAI-Game-UAT/web', 
  //base: '/RAI-Game-SIT/web', 
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
})

====================================

import { createRouter, createWebHistory, createMemoryHistory } from 'vue-router';

const routes = [

    {

        path: '/',

        name: 'Home',

        component:  () => import("../views/Home.vue")

    },

    {

        path: '/about',

        name: 'About',

        component:  () => import("../views/About.vue")

    },

 

];

const router = createRouter({

    //history: createWebHistory(import.meta.env.BASE_URL), //url path will change

    history: createMemoryHistory(),

    routes, });

export default router;