Vue.js 3.0 Tutorial

Vue.js 3.0 Component Advanced

Vue.js 3.0 Transitions & Animations

Vue.js 3.0 Reusable & Combinable

Vue.js 3.0 Advanced

Vue.js 3.0 Tools

Vue.js 3.0 Scale

Vue.js 3.0 Accessibility

Vue.js 3.0 Migrating from Vue2

Vue.js 3.0 Contribute Documentation

Vue.js 3.0 API References

Vue.js 3.0 Style Guide

Vue 3.0 application & component example

Here's an example of a basic Vue 3.0 application with a single component:

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="increment">Increment</button>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const message = 'Hello, Vue!'
    const count = ref(0)

    const increment = () => {
      count.value++
    }

    return { message, count, increment }
  }
}
</script>

In this example, we have a single component with a message and a count. The message is a simple string, while the count is a reactive variable created with the ref function. The increment function is used to increment the count when a button is clicked, and the count is displayed in the template using interpolation.

To use this component in an application, we can create a new Vue instance and mount it to an element in the DOM:

<template>
  <div id="app"></div>
</template>

<script>
import { createApp } from 'vue'
import MyComponent from './MyComponent.vue'

const app = createApp(MyComponent)

app.mount('#app')
</script>

In this example, we import our MyComponent and create a new Vue application using the createApp function. We then mount our component to the #app element in the DOM using the mount method.

With this setup, our component will be rendered in the #app element, and we can interact with it using the defined methods and reactive variables.

This is a very basic example, but it demonstrates the basic structure and usage of a Vue 3.0 application and component. As you continue to develop your application, you can create more complex components and interact with the Vue API to build dynamic and reactive user interfaces.

  1. Vue 3.0 Component Lifecycle:

    • Vue 3.0 introduces the Composition API, which offers more flexibility compared to the options API. The common lifecycle hooks used in the Composition API include onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, and onUnmounted.
    <!-- ComponentLifecycle.vue -->
<template>
  <div>{{ message }}</div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue!');

    onMounted(() => {
      console.log('Component mounted');
    });

    onUnmounted(() => {
      console.log('Component unmounted');
    });

    return {
      message,
    };
  },
};
</script>

  2. Vue 3.0 Creating a Vue Application:

    • Create a simple Vue 3.0 application using the createApp function.
    <!-- index.html -->
<html>
  <head>
    <title>Vue 3.0 App</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="main.js"></script>
  </body>
</html>

    // main.js
import { createApp } from 'vue';
import App from './App.vue';

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

  3. Vue 3.0 Component Communication:

    • Use props for parent-to-child communication and events for child-to-parent communication.
    <!-- ParentComponent.vue -->
<template>
  <child-component :message="parentMessage" @notify="handleNotify" />
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentMessage: 'Hello from Parent',
    };
  },
  methods: {
    handleNotify(message) {
      console.log('Received message from child:', message);
    },
  },
};
</script>

    <!-- ChildComponent.vue -->
<template>
  <button @click="notifyParent">Notify Parent</button>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  props: {
    message: String,
  },
  methods: {
    notifyParent() {
      this.$emit('notify', 'Hello from Child');
    },
  },
});
</script>

  4. Vue 3.0 Global vs Local Component Registration:

    • Register components globally using app.component or locally within the components option.
    // GlobalRegistration.js
import { createApp } from 'vue';
import App from './App.vue';
import GlobalComponent from './GlobalComponent.vue';

const app = createApp(App);

// Global registration
app.component('global-component', GlobalComponent);

app.mount('#app');

    <!-- LocalRegistration.vue -->
<template>
  <div>
    <local-component />
    <global-component />
  </div>
</template>

<script>
import LocalComponent from './LocalComponent.vue';
import GlobalComponent from './GlobalComponent.vue';

export default {
  components: {
    LocalComponent,
    GlobalComponent,
  },
};
</script>

  5. Vue 3.0 Component Props and Data:

    • Use props for communication from parent to child and data for component-internal state.
    <!-- PropsAndData.vue -->
<template>
  <div>
    <child-component :message="parentMessage" />
  </div>
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentMessage: 'Hello from Parent',
    };
  },
};
</script>

    <!-- ChildComponent.vue -->
<template>
  <div>{{ message }}</div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  props: {
    message: String,
  },
});
</script>

  6. Vue 3.0 Component Events Handling:

    • Emit custom events from child components to communicate with their parents.
    <!-- EventHandling.vue -->
<template>
  <div>
    <child-component @custom-event="handleCustomEvent" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleCustomEvent(data) {
      console.log('Received custom event with data:', data);
    },
  },
};
</script>

    <!-- ChildComponent.vue -->
<template>
  <button @click="emitCustomEvent">Trigger Custom Event</button>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  methods: {
    emitCustomEvent() {
      this.$emit('custom-event', 'Custom data');
    },
  },
});
</script>

  7. Vue 3.0 Structuring Vue Applications:

    • Organize your Vue 3.0 application into components, views, and services.
    <!-- App.vue -->
<template>
  <div>
    <header-component />
    <router-view />
    <footer-component />
  </div>
</template>

<script>
import HeaderComponent from './HeaderComponent.vue';
import FooterComponent from './FooterComponent.vue';

export default {
  components: {
    HeaderComponent,
    FooterComponent,
  },
};
</script>

    <!-- HeaderComponent.vue -->
<template>
  <header>
    <h1>My App</h1>
  </header>
</template>

<script>
export default {
  // Component definition
};
</script>

    <!-- FooterComponent.vue -->
<template>
  <footer>
    <p>© 2023 My App</p>
  </footer>
</template>

<script>
export default {
  // Component definition
};
</script>

  8. Vue 3.0 Component Composition API:

    • Utilize the Composition API to structure component logic more cohesively.
    <!-- CompositionAPI.vue -->
<template>
  <div>
    <p>{{ greeting }}</p>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const greeting = ref('Hello, Composition API!');

    onMounted(() => {
      console.log('Component mounted');
    });

    return {
      greeting,
    };
  },
};
</script>
Copyright © devanddep.com | All Rights Reserved