# Vue files

# Overview of a Vue project

The newly created Vue project has the following folders and files:

• src: the sources of your project
• public: all the content that will be directly put at the root of the web server, without going through Webpack
• package.json: the NPM package information of the project (version, dependencies, scripts etc.)
• vue.config.js: a configuration file for Vue CLI for this project

Other configuration files for the build tools can also be found here.

In the src folder, you have:

• assets: static resources (images, files) that will be imported by Webpack within your Vue components
• components: your Vue components (distributed by folder by "module" of your application)
• App.View: Your root Vue component, which contains the entire application
• main.js: the entry point of the entire application's JavaScript code

Later, you may need to create additional folders in src as needed. For example, a services folder is commonly found which contains business logic bricks with functions used in several components. Or a utils folder to store various utility functions in JavaScript instead of repeating them in multiple places.

# Single File Components *.vue

• A Vue.js application is divided into several components
• A component is a .vue file
• A .vue file consists of three optional elements:
  • the <template> tag contains the HTML code of the component
  • the <script> tag (optional) contains the JavaScript code of the component
  • the <style> tag (optional) contains the CSS style of the component

<template>
  <div>
    <span>Hello {{ who }}</span>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      who: "World"
    };
  }
};
</script>

<style scoped>
span {
  color: blue;
}
</style>

The script part of the component must export an object with the properties of the component by default. Here we find the property name, useful for identifying the component during debugging; and the data property that sets the initial data of the component. The other properties will be discussed in the Components section.

# Work with components

The Vue components described above are the building blocks in which you will design your web interfaces. A web application is made of small reusable components, embedded in higher level components to form the layout, the arrangement of your elements on the page. This structure can be described as a component tree.

To link the components together, the child components are declared in the parent component template, using their name as a tag. A component can be reused as many times as necessary by including it as follows:

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

<script>
import MyComponent from "~/components/MyComponent.vue";

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

In your Vue project, see how the HelloWorld component has been integrated into theApp root component.

# Text interpolation in templates

<template>
  <p>Order ref. {{ orderReference }} - Total: {{ price.toFixed(2) + "€" }}</p>
</template>

<script>
export default {
  name: "OrderInfo",
  data() {
    return {
      orderReference: "ABCXYZ",
      price: 17.3
    };
  }
};
</script>

Interpolation only works on textual content of elements. You can not use it to change the value of HTML attributes or to insert HTML code. For this, you will need to resort to directives, which will see in the following section.

# Practical Work: Your first component

1. Add the CSS stylesheet that will serve as basis for all the practical work, downloadable here: stylesheet.css; put it in the src folder and include it in the project with import './stylesheet.css' in the script part of App.vue.

2. Create a new component LoginForm.vue containing the following authentication form:

<div id="login-form">
  <form>
    <h1>Authentication</h1>
    <p>Fill out this form to login.</p>
    <hr />

    <label for="email"><b>Email</b></label>
    <input
      type="text"
      placeholder="Enter your email"
      id="email"
      name="email"
      required
    />

    <label for="psw"><b>Password</b></label>
    <input
      type="password"
      placeholder="Enter your password"
      id="psw"
      name="psw"
      required
    />

    <p><button type="submit">Login</button></p>
  </form>
</div>

3. Delete the existing contents of the App.vue component template, and display the LoginForm.vue component instead with <login-form />. You will also need to declare LoginForm in the components attribute of the App component.

4. Complete the LoginForm.vue file to declare the name of the component, and adata containing a title property. Then use the text interpolation in the template to pass the title of the form "Authentication" using the variable title.