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 single-file components

Single-File Components (SFCs) are a fundamental part of Vue.js development. They allow you to encapsulate HTML, JavaScript, and CSS related to a component into a single .vue file, which makes organizing and managing your components easier.

Here is a basic example of a Vue 3 Single-File Component:

<template>
  <div class="hello">
    <h1>{{ message }}</h1>
  </div>
</template>

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

export default {
  name: 'HelloWorld',
  setup() {
    const message = ref('Hello Vue 3');
    return { message };
  },
}
</script>

<style scoped>
.hello {
  color: red;
}
</style>

Here is what each section does:

<template>: This section contains the HTML of your component. It can only have one root-level element.
<script>: This section contains the JavaScript code for your component. In this case, we're using Vue 3's Composition API to declare a reactive variable message. The setup function is a new addition in Vue 3 that is used when you want to use the Composition API.
<style>: This section contains the CSS for your component. The scoped attribute limits the CSS to this component only.

Note: To work with Single-File Components, you need a build setup that compiles these .vue files into JavaScript, because browsers don't understand them natively. The most common build setups are Vue CLI or Vite, which use webpack or esbuild under the hood.

To use this component in another component or your main application, you need to import it:

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

<script>
import HelloWorld from './components/HelloWorld.vue'

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

In this case, HelloWorld is imported and then registered as a local component, making it available for use in the template.

This encapsulation provided by Single-File Components makes them an essential tool in Vue development, offering a clean and organized way to build your Vue applications.

Creating Single-File Components in Vue 3.0:

Use a .vue file for a single-file component.

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

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

<style scoped>
/* Scoped styles go here */
</style>

Script Section in Vue 3.0 Single-File Components:

The script section contains the component's JavaScript logic.

<script>
export default {
  data() {
    return {
      // Data properties go here
    };
  },
  methods: {
    // Methods go here
  },
};
</script>

Style Section in Vue 3.0 Single-File Components:

The style section is for component-specific styles.

<style>
/* Global styles go here */
</style>

<style scoped>
/* Scoped styles go here */
</style>

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

Data, Props, and Methods in Vue 3.0 Single-File Components:

Define data properties, props, and methods in the script section.

<script>
export default {
  data() {
    return {
      message: 'Hello',
    };
  },
  props: {
    // Props definition
  },
  methods: {
    showMessage() {
      alert(this.message);
    },
  },
};
</script>

Vue 3.0 Single-File Components with TypeScript:

Use TypeScript with single-file components for static typing.

<script lang="ts">
import { defineComponent } from 'vue';

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

Vue 3.0 Single-File Components and JSX:

Use JSX syntax for template rendering.

<script setup>
import { ref } from 'vue';

const message = ref('Hello from JSX');

// Additional logic here
</script>

Importing and Using Other Components in Vue 3.0 Single-File Components:

Import and use other components within the script section.

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

export default {
  components: {
    AnotherComponent,
  },
  // Additional logic
};
</script>

Vue 3.0 Single-File Component Props Validation:

Validate props using the props option.

<script>
export default {
  props: {
    message: {
      type: String,
      required: true,
    },
  },
  // Additional logic
};
</script>

Vue 3.0 Single-File Component Events and Communication:

Emit custom events for parent-child communication.

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

Vue 3.0 Single-File Components and Slots:

Use slots for flexible content insertion.

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  // Additional logic
};
</script>