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 Style Guide

Vue 3.0 component basics

In Vue 3, components are the building blocks of your application. They allow you to encapsulate reusable code into self-contained units. A Vue application is essentially a tree of components.

Here's an overview of the basics you need to know to create components in Vue 3:

1. Defining a Component

Here's an example of a simple Vue component:

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
import { ref } from 'vue'

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

    return {
      message
    }
  }
}
</script>

In the above example, we define a component with a template and a script section. The template contains the markup, while the script contains the logic. We use the setup function for the component's logic as this component is defined using Vue's Composition API.

2. Using Components

To use a component, you must first import it and then declare it in the parent component. After that, you can use it like an HTML element:

<template>
  <div>
    <HelloComponent />
  </div>
</template>

<script>
import HelloComponent from './HelloComponent.vue'

export default {
  components: {
    HelloComponent
  }
}
</script>

In the example above, we import HelloComponent and declare it in the components option. After this, we can use it in the template with the <HelloComponent /> tag.

3. Passing Data to Child Components with Props

Props are custom attributes you can register on a component. When a value is passed to a prop attribute, it becomes a property on that component instance.

Here's how you can pass a prop to a child component:

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

<script>
export default {
  props: ['message']
}
</script>

In this example, we define a message prop in ChildComponent. We can pass data to this prop from the parent component:

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent message="Hello from parent!" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  }
}
</script>

In the ParentComponent, we pass the string "Hello from parent!" to the message prop of ChildComponent.

These are the basics of working with components in Vue 3. Of course, Vue's component system is capable of much more, including handling events with v-on, using v-model for two-way data binding, dynamic components, and more.

Creating Components in Vue 3.0:

Use the Vue.component method or Single File Components (SFC) to create components.

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

<script>
export default {
  data() {
    return {
      message: 'Hello from MyComponent!',
    };
  },
};
</script>

<!-- ParentComponent.vue -->
<template>
  <div>
    <my-component></my-component>
  </div>
</template>

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

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

Vue 3.0 Component Lifecycle Hooks:

Lifecycle hooks allow you to perform actions at different stages of a component's lifecycle.

<script>
export default {
  beforeCreate() {
    console.log('Before Create Hook');
  },
  created() {
    console.log('Created Hook');
  },
  // ... other hooks
};
</script>

Props and Data in Vue 3.0 Components:

Use props to pass data from parent to child components.
Data is used for component-specific state.

<script>
export default {
  props: ['propMessage'],
  data() {
    return {
      localMessage: 'Local Data',
    };
  },
};
</script>

Vue 3.0 Component Communication:

Emit custom events or use a shared state (e.g., Vuex) for communication between components.

<!-- ChildComponent.vue -->
<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello from ChildComponent');
    },
  },
};
</script>

<!-- ParentComponent.vue -->
<template>
  <child-component @message="handleMessage"></child-component>
</template>

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

export default {
  methods: {
    handleMessage(message) {
      console.log(message); // Handle the emitted message
    },
  },
  components: {
    ChildComponent,
  },
};
</script>

Vue 3.0 Component Methods and Computed Properties:

Define methods for custom logic and computed properties for dynamic data.

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
  computed: {
    doubledCount() {
      return this.count * 2;
    },
  },
};
</script>

Scoped Styles in Vue 3.0 Components:
- Use scoped styles to limit styles to the current component.
```
<style scoped>
.message {
  color: blue;
}
</style>
```

Vue 3.0 Functional Components:

Functional components are stateless and can be simpler than regular components.

<script functional>
export default (props, { slots }) => {
  return h('div', { class: 'functional-component' }, slots.default());
};
</script>

Slot Usage in Vue 3.0 Components:

Use slots for flexible content insertion.

<!-- ParentComponent.vue -->
<template>
  <my-component>
    <p>This content goes into the slot.</p>
  </my-component>
</template>

<!-- MyComponent.vue -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

Vue 3.0 Dynamic Components:

Use :is for dynamic component rendering.

<template>
  <component :is="currentComponent"></component>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: 'MyComponent',
    };
  },
};
</script>

Vue 3.0 Component Registration:

<!-- Global Registration -->
<script>
import MyComponent from './MyComponent.vue';

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

<!-- Local Registration -->
<template>
  <my-component></my-component>
</template>

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

export default {
  components: {
    'my-component': MyComponent,
  },
};
</script>

Vue 3.0 Testing Components:

Use testing libraries like Jest or Vue Test Utils to test components.

<!-- MyComponent.spec.js -->
import { mount } from '@vue/test-utils';
import MyComponent from './MyComponent.vue';

describe('MyComponent', () => {
  it('renders correctly', () => {
    const wrapper = mount(MyComponent);
    expect(wrapper.html()).toMatchSnapshot();
  });
});