Vue CLI Recap – Client Side Development

Install the Vue CLI

$ npm install -g @vue/cli

Create a Project

$ vue create project-name

Arrow down to Manually select features.

Select only the following features

Choose Vue version
Babel

Deselect Linter/Formatter.

Choose Version 3.

Choose to place config In dedicated config files.

Choose N to not save presets.

Edit vue.config.js

module.exports = defineConfig({
    transpileDependencies: true,
    publicPath: "./"
})

To test run

$ npm run build

To create distribution run

$ npm run build

Copy code in /dist to host server.

Vue Components

Each have

template element (which can include other component elements)
script element (optional)
style element (optional)

To use an external component in a template, we must

import the component in the script element
export, in the script element, a components property that includes the component
use the component name as a HTML tag in the template

Templates can contain references to data that is exported via the data() property.

Referencing Template Elements

<template>
  <input type="text"

ref=”name”

>
  <button @click="handleClick">click me</button>
</template>

methods: {
  handleClick() {
    this.

$refs.name

.classList.add('active')
    this.$refs.name.focus()
  }
}

Limit the Style of a Component

<style

scoped

>
   ...
</style>

// define and import ./assets/global.css for global styles

Passing Data to Child Components

Child component must specify (in props property) properties that can be set by parent component.

<script>
  export default {

props: [‘title’, ‘content’]

  }
</script>

Parent can set the values of the props when declaring an instance of the component.

<Modal

title

="New Modal Title"

content

="New Modal Content" />

A parent can bind data to the child props.

<template>
  ...
  <Modal

:title=”modalTitle”

:content=”modalContent”

 />
</template>

<script>
  ...
  export default {
    data() {
      return {

modalTitle

: 'Binded Title',

modalContent

: 'Binded Data'
      }
    }
  }
</script>

Passing events from the Child to the Parent

A child can emit an event with any name using this.$emit.

export default {
  ...
  methods: {
    foo() {

this.$emit(‘close’)

    }
  }
}

The parent can register a handler for the event emitted by the child.

Restricting Event Handlers to the Registering Element

<div

@click.self

="foo">

Passing HTML into Component Slots

The child component’s template must declare a slot element with optional default content that will be displayed in the parent does not pass HTML into the slot.

<template>

<slot>

<h1>Default Content</h1>

</slot>

</template>

The parent component can pass HTML into the slot.

<Modal>

<h1>Slot Title</h1>

<p>Slot Description</p>

 
</Modal>

A Child component can declare named slots using the name attribute.

<template>       
  <slot

name=”links”

></slot>
</template>

The parent component can specify a content for a named slot using a template element.

<Modal>

<template v-slot:links>

    <a href="#">sign up now</a>

</template>

 
</Modal>

Teleport HTML Content to Outside the App Element

We can declare additional elemenst besides the app element in the site’s .html file.

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

<div id=”modals”></div>

We can load (teleport) a component to HTML elements outside the app element.

teleport to=”#modals”

> 
  <Modal></Modal> 
<

/teleport