Web Develpers era: vuejs crud

install bootstarap vue

fontawesome

intergrate

table list with pagination

in vue

option api

convert option api to composition api

in web.php

Route::get('/{any}', function () {
    return view('vue');
})->where('any', '.*');

when we visit any url in web it redirect to vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue App</title>
</head>
<body>
    <div id="app"></div>
    <script src="{{ mix('js/main.js') }}"></script>
</body>
</html>

npm i bootstrap-vue-3

vue create. => to install vue

table with pagination with simple data

basic vue page

pareent.vue

<template>
  <div>
    <h1>Parent Component</h1>
    <Child :user="userInfo" @onUpdated="handleUpdate" />
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  components: {
    Child
  },
  data() {
    return {
      userInfo: { name: 'Alice', age: 30 }
    };
  },
  computed: {
    userAge() {
      return this.userInfo.age;
    }
  },
  watch: {
    userAge(newVal, oldVal) {
      console.log(`User age changed from ${oldVal} to ${newVal}`);
    }
  },
  methods: {
    handleUpdate(newData) {
      console.log("Updated data received from child:", newData);
      this.userInfo = newData; // This will trigger the watcher.
    }
  },
  beforeCreate() {
    console.log('Parent is about to be created');
  },
  created() {
    console.log('Parent has been created');
  },
  beforeMount() {
    console.log('Parent is about to be mounted');
  },
  mounted() {
    console.log('Parent component is mounted');
  },
  beforeUnmount() {
    console.log('Parent component is about to be unmounted');
  },
  unmounted() {
    console.log('Parent component has been unmounted');
  }
};
</script>

child.vue

<template>
  <div>
    <h2>Child Component</h2>
    <p>User Name: {{ user.name }}, Age: {{ user.age }}</p>
    <button @click="updateUser">Age User</button>
  </div>
</template>

<script>
export default {
  props: {
    user: {
      type: Object,
      required: true
    }
  },
  emits: ['onUpdated'],
  methods: {
    updateUser() {
      const updatedUser = { ...this.user, age: this.user.age + 1 };
      this.$emit('onUpdated', updatedUser);
    }
  },
  beforeCreate() {
    console.log('Child is about to be created');
  },
  created() {
    console.log('Child has been created');
  },
  beforeMount() {
    console.log('Child is about to be mounted');
  },
  mounted() {
    console.log('Child component is mounted');
  },
  beforeUpdate() {
    console.log('Child component is about to update');
  },
  updated() {
    console.log('Child component has updated');
  },
  beforeUnmount() {
    console.log('Child component is about to be unmounted');
  },
  unmounted() {
    console.log('Child component has been unmounted');
  }
};
</script>

named slot and scoped slot

parent.vue

<template>
  <div>
    <h1>Parent Component</h1>
    <Child :user="userInfo" @onUpdated="handleUpdate">
      <!-- Using a named slot -->
      <template #footer>
        <p>This is the footer in the parent component.</p>
      </template>
    </Child>
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  components: {
    Child
  },
  data() {
    return {
      userInfo: { name: 'Alice', age: 30 }
    };
  },
  methods: {
    handleUpdate(newData) {
      console.log("Updated data received from child:", newData);
      this.userInfo = newData;
    }
  }
};
</script>

child.vue

<template>
  <div>
    <h2>Child Component</h2>
    <p>User Name: {{ user.name }}, Age: {{ user.age }}</p>
    <!-- Using a scoped slot -->
    <slot :user="user" :updateUser="updateUser" />
    <!-- Using a named slot -->
    <slot name="footer" />
    <button @click="updateUser">Age User</button>
  </div>
</template>

<script>
export default {
  props: {
    user: {
      type: Object,
      required: true
    }
  },
  emits: ['onUpdated'],
  methods: {
    updateUser() {
      const updatedUser = { ...this.user, age: this.user.age + 1 };
      this.$emit('onUpdated', updatedUser);
    }
  }
};
</script>

The parent component (Parent.vue) includes a named slot with the key footer. Inside this slot, we have a simple paragraph that serves as the footer content.
The child component (Child.vue) has a scoped slot that receives the user object and the updateUser method from the parent. It also includes the named slot for the footer content.
The Child component still emits an onUpdated event to communicate with the parent when the user data is updated.

This setup demonstrates the use of both scoped and named slots in Vue.js, allowing for more flexible and reusable component compositions. Scoped slots enable passing data and methods from the parent to the child component, while named slots provide a way to define specific areas in the child component's template for content insertion.

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

compostion api

parent component

<template>
  <div>
    <h1>Parent Component</h1>
    <Child :user="userInfo" @onUpdated="handleUpdate" />
  </div>
</template>

<script setup>
import { ref, computed, watch, onBeforeMount, onMounted, onBeforeUnmount, onUnmounted } from 'vue';
import Child from './Child.vue';

const userInfo = ref({ name: 'Alice', age: 30 });

const userAge = computed(() => userInfo.value.age);

const handleUpdate = (newData) => {
  console.log("Updated data received from child:", newData);
  userInfo.value = newData; // This will trigger the watcher.
};

watch(userAge, (newVal, oldVal) => {
  console.log(`User age changed from ${oldVal} to ${newVal}`);
});

onBeforeMount(() => {
  console.log('Parent is about to be mounted');
});

onMounted(() => {
  console.log('Parent component is mounted');
});

onBeforeUnmount(() => {
  console.log('Parent component is about to be unmounted');
});

onUnmounted(() => {
  console.log('Parent component has been unmounted');
});
</script>

child component

const updatedUser = { ...user, age: user.age + 1 };

const updatedUser = { ...$props.user, age: $props.user.age + 1 };

<template>
  <div>
    <h2>Child Component</h2>
    <p>User Name: {{ user.name }}, Age: {{ user.age }}</p>
    <button @click="updateUser">Age User</button>
  </div>
</template>

<script setup>
import { ref, emit, defineProps,onBeforeMount, onMounted, onBeforeUnmount, onUnmounted, onBeforeUpdate, onUpdated } from 'vue';

const user = ref(null);
const { user } = defineProps(["user"]);
const updateUser = () => {
  const updatedUser = { ...user.value, age: user.value.age + 1 };
  emit('onUpdated', updatedUser);
};

onBeforeMount(() => {
  console.log('Child is about to be mounted');
});

onMounted(() => {
  console.log('Child component is mounted');
});

onBeforeUnmount(() => {
  console.log('Child component is about to be unmounted');
});

onUnmounted(() => {
  console.log('Child component has been unmounted');
});

onBeforeUpdate(() => {
  console.log('Child component is about to update');
});

onUpdated(() => {
  console.log('Child component has updated');
});
</script>

DONT IMPORT BOOTSTRAPVUE3 In individual vue files


npm install vue-feather-icons

node -v
nvm install 19
nvm use 19

npx mix watch

npm ls vue-feather-icons

npm install @fortawesome/fontawesome-free
 npm install --save @fortawesome/fontawesome-svg-core @fortawesome
/free-solid-svg-icons @fortawesome/vue-fontawesome

         npm i bootstrap-vue-next
bootstrap-vue-next
          BAccordion, BAccordionItem, BAlert, BAvatar, BAvatarGroup, BBadge, BBreadcrumb, BBreadcrumbItem, BButton, BButtonGroup, BButtonToolbar, BCard, BCardBody, BCardFooter, BCardGroup, BCardHeader, BCardImg, BCardSubtitle, BCardText, BCardTitle, BCarousel, BCarouselSlide, BCloseButton, BCol, BCollapse, BContainer, BDropdown, BDropdownDivider, BDropdownForm, BDropdownGroup, BDropdownHeader, BDropdownItem, BDropdownItemButton, BDropdownText, BForm, BFormCheckbox, BFormCheckboxGroup, BFormFile, BFormFloatingLabel, BFormGroup, BFormInput, BFormInvalidFeedback, BFormRadio, BFormRadioGroup, BFormRow, BFormSelect, BFormSelectOption, BFormSelectOptionGroup, BFormSpinbutton, BFormTag, BFormTags, BFormText, BFormTextarea, BFormValidFeedback, BImg, BInputGroup, BInputGroupAddon, BInputGroupAppend, BInputGroupPrepend, BInputGroupText, BLink, BListGroup, BListGroupItem, BModal, BModalOrchestrator, BNav, BNavForm, BNavItem, BNavItemDropdown, BNavText, BNavbar, BNavbarBrand, BNavbarNav, BNavbarToggle, BOffcanvas, BOverlay, BPagination, BPlaceholder, BPlaceholderButton, BPlaceholderCard, BPlaceholderTable, BPlaceholderWrapper, BPopover, BProgress, BProgressBar, BRow, BSpinner, BTab, BTable, BTableLite, BTableSimple, BTabs, BTbody, BTd, BTfoot, BTh, BThead, BToast, BToastOrchestrator, BTooltip, BTr, BTransition, BvCarouselEvent, BvEvent, BvTriggerableEvent, Components, Composables, Directives, Types, Utils, createBootstrap, default, useBreadcrumb, useColorMode, useModal, useModalController, useScrollspy, useToast, vBColorMode, vBModal, vBPopover, vBScrollspy, vBToggle, vBTooltip

          mport { BootstrapVue3, BModal, BButton } from 'bootstrap-vue-3';

          app.use(BootstrapVue3);
app.component('b-modal', BModal);
app.component('b-button', BButton);
BAccordion, BAccordionItem, BAlert, BAvatar, BAvatarGroup, BBadge, BBreadcrumb, BBreadcrumbItem, BButton, BButtonGroup, BButtonToolbar, BCard, BCardBody, BCardFooter, BCardGroup, BCardHeader, BCardImg, BCardSubtitle, BCardText, BCardTitle, BCarousel, BCarouselSlide, BCloseButton, BCol, BCollapse, BContainer, BDropdown, BDropdownDivider, BDropdownForm, BDropdownGroup, BDropdownHeader, BDropdownItem, BDropdownItemButton, BDropdownText, BForm, BFormCheckbox, BFormCheckboxGroup, BFormFloatingLabel, BFormGroup, BFormInput, BFormInvalidFeedback, BFormRadio, BFormRadioGroup, BFormRow, BFormSelect, BFormSelectOption, BFormSelectOptionGroup, BFormSpinButton, BFormTag, BFormTags, BFormText, BFormTextarea, BFormValidFeedback, BImg, BInputGroup, BInputGroupAddon, BInputGroupAppend, BInputGroupPrepend, BInputGroupText, BLink, BListGroup, BListGroupItem, BModal, BNav, BNavForm, BNavItem, BNavItemDropdown, BNavText, BNavbar, BNavbarBrand, BNavbarNav, BNavbarToggle, BOffcanvas, BOverlay, BPagination, BPlaceholder, BPlaceholderButton, BPlaceholderCard, BPlaceholderTable, BPlaceholderWrapper, BPopover, BProgress, BProgressBar, BRow, BSkeleton, BSkeletonIcon, BSkeletonTable, BSkeletonWrapper, BSpinner, BTab, BTable, BTableSimple, BTabs, BTbody, BTd, BTfoot, BTh, BThead, BToast, BToastContainer, BToastPlugin, BToaster, BTr, BTransition, BootstrapVue3, BvEvent, BvModalEvent, Components, Composables, Directives, Types, Utils, default, useBreadcrumb, useColorMode, useToast, vBColorMode, vBPopover, vBToggle, vBTooltip, vBVisible)


import { createApp } from 'vue';
import App from './App.vue';
import router from './router'; // Import the router instance
import { createBootstrap} from 'bootstrap-vue-next';
import { BootstrapVue3, BModal, BButton} from 'bootstrap-vue-3'; // Import BVModalPlugin
import { BSkeleton, BSkeletonIcon, BSkeletonTable, BSkeletonWrapper, BToastContainer, BToastPlugin, BToaster, BvEvent, BvModalEvent, vBColorMode, vBPopover, vBToggle, vBTooltip, vBVisible } from 'bootstrap-vue-nuxt';

import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue-next/dist/bootstrap-vue-next.css';

import "bootstrap-vue-3/dist/bootstrap-vue-3.css";
const app = createApp(App); // Create the Vue app instance

// Use BootstrapVue and IconsPlugin
app.use(createBootstrap);
app.use(BootstrapVue3);
app.component('b-modal', BModal);
app.component('b-button', BButton);
// Add Font Awesome icons to the library
library.add(fas);

// Register Font Awesome icon component globally
app.component('font-awesome-icon', FontAwesomeIcon);

npm install vuex@next --save

Web Develpers era

vuejs crud

No comments:

Post a Comment

Event listening in react

Labels