Como Crear una Página Web con Vue JS 2.6.11 y Vuetify 2.3.10 – Parte 2

4 minuto(s)

En esta página:

Demo

En la parte anterior llamada Como Crear una Página Web con Vue JS 2.6.11 y Vuetify 2.3.10 – Parte 1 iniciamos con los primeros pasos del proyecto, creamos un nuevo proyecto con Vue JS y luego desplegamos o integramos Vuetify, en esta parte 2 crearemos el menú y el footer, estos 2 elementos los usaremos en todas las páginas, vamos con ello.

Partes

Parte 1
Parte 2
Parte 3
Parte 4
Parte 5
Parte 6 (Final – Código Fuente GitHub)

Antes de continuar, te invito a leer los siguientes artículos:

Asimismo te invito a escuchar el Podcast: “Donde buscar ayuda sobre Programación”:

Spotify	SoundCloud

Bien ahora continuemos con el Post: Como Crear una Página Web con Vue JS 2.6.11 y Vuetify 2.3.10 – Parte 2.

Vamos a comenzar creando 2 elementos importantes de toda página web y que usaremos en todas las páginas, me refiero al menú y al footer, estos elementos y la mayoría de elementos en la página web los crearemos como componentes.

Menú

Creo un nuevo archivo para mi componente Menú llamado Menu.vue en src > components > Menu.vue


/pagina-web-vuejs-vuetify
  ├── .git
  ├── /node_modules
  ├── /public
  ├── /src
      ├── /assets
      ├── /components
          ├── Menu.vue // Creamos este Archivo 
      ├── /plugins
  ├── .gitignore
  ├── babel.config.js 
  ├── package-lock.json 
  ├── package.json 
  ├── README.md

/pagina-web-vuejs-vuetify

├── .git

├── /node_modules

├── /public

├── /src

├── /assets

├── /components

├── Menu.vue // Creamos este Archivo

├── /plugins

├── .gitignore

├── babel.config.js

├── package-lock.json

├── package.json

├── README.md

Abro el archivo Menu.vue y comienzo agregando en el template lo siguiente.


<template>
  <v-card
    dark
  >
    <v-toolbar>
    
      <v-app-bar-nav-icon 
        @click="drawer = true"
        v-if="$vuetify.breakpoint.xsOnly"
      >
      </v-app-bar-nav-icon>

      <v-toolbar-title 
        :class="{'': $vuetify.breakpoint.smAndDown, 'ml-6': $vuetify.breakpoint.mdAndUp}">
        Mi Proyecto
      </v-toolbar-title>

      <v-spacer></v-spacer>

        <v-btn to="/" class="text-capitalize mr-2" v-bind:class="{ 'v-btn--active': $route.path == '/' }" v-show="$vuetify.breakpoint.lgOnly"> 
          Home 
        </v-btn>

        <v-btn to="/nosotros" class="text-capitalize mr-2" v-bind:class="{ 'v-btn--active': $route.path == '/nosotros' }" v-show="$vuetify.breakpoint.lgOnly">
          Nosotros
        </v-btn>

        <v-btn to="/servicios" class="text-capitalize mr-2" v-bind:class="{ 'v-btn--active': $route.path == '/servicios' }" v-show="$vuetify.breakpoint.lgOnly"> 
          Servicios
        </v-btn>

        <v-btn to="/contacto" class="text-capitalize mr-2" v-bind:class="{ 'v-btn--active': $route.path == '/contacto' }" v-show="$vuetify.breakpoint.lgOnly"> 
            Contacto 
        </v-btn> 

        <v-btn icon>
          <v-icon>mdi-magnify</v-icon>
        </v-btn>

        <v-btn icon>
          <v-icon>mdi-heart</v-icon>
        </v-btn>

        <v-btn icon>
          <v-icon>mdi-dots-vertical</v-icon>
        </v-btn>
        
    </v-toolbar>

    <v-navigation-drawer
      v-model="drawer"
      absolute
      width="100%"
      height="auto"
      temporary
    >
      <v-list
        nav
        dense
      >
        <v-list-item-group
          v-model="group"            
        >
          <v-list-item v-bind:class="{ 'bg-active': $route.path == '/' }">
            <v-list-item-icon>
              <v-icon>mdi-home</v-icon>
            </v-list-item-icon>
            <v-list-item-title>
              <router-link to="/" class="flm">Home</router-link>
            </v-list-item-title>
          </v-list-item>
  
          <v-list-item v-bind:class="{ 'bg-active': $route.path == '/nosotros' }">
            <v-list-item-icon>
              <v-icon>mdi-account-multiple</v-icon>
            </v-list-item-icon>
            <v-list-item-title>
              <router-link to="/nosotros" class="flm">Nosotros</router-link>
            </v-list-item-title>
          </v-list-item>

          <v-list-item v-bind:class="{ 'bg-active': $route.path == '/servicios' }">
            <v-list-item-icon>
              <v-icon>mdi-format-list-bulleted</v-icon>
            </v-list-item-icon>
            <v-list-item-title>
              <router-link to="/servicios" class="flm">Servicios</router-link>
            </v-list-item-title>
          </v-list-item>

          <v-list-item v-bind:class="{ 'bg-active': $route.path == '/contacto' }">
            <v-list-item-icon>
              <v-icon>mdi-earth</v-icon>
            </v-list-item-icon>
            <v-list-item-title>
              <router-link to="/contacto" class="flm">Contacto</router-link>
            </v-list-item-title>
          </v-list-item>
  
        </v-list-item-group>
      </v-list>        
    </v-navigation-drawer>

  </v-card>
</template>

100

101

102

103

104

105

106

107

<v-card

dark

<v-toolbar>

<v-app-bar-nav-icon

@click="drawer = true"

v-if="$vuetify.breakpoint.xsOnly"

</v-app-bar-nav-icon>

<v-toolbar-title

:class="{'': $vuetify.breakpoint.smAndDown, 'ml-6': $vuetify.breakpoint.mdAndUp}">

Mi Proyecto

</v-toolbar-title>

<v-spacer></v-spacer>

<v-btn to="/" class="text-capitalize mr-2" v-bind:class="{ 'v-btn--active': $route.path == '/' }" v-show="$vuetify.breakpoint.lgOnly">

Home

</v-btn>

<v-btn to="/nosotros" class="text-capitalize mr-2" v-bind:class="{ 'v-btn--active': $route.path == '/nosotros' }" v-show="$vuetify.breakpoint.lgOnly">

Nosotros

</v-btn>

<v-btn to="/servicios" class="text-capitalize mr-2" v-bind:class="{ 'v-btn--active': $route.path == '/servicios' }" v-show="$vuetify.breakpoint.lgOnly">

Servicios

</v-btn>

<v-btn to="/contacto" class="text-capitalize mr-2" v-bind:class="{ 'v-btn--active': $route.path == '/contacto' }" v-show="$vuetify.breakpoint.lgOnly">

Contacto

</v-btn>

<v-btn icon>

<v-icon>mdi-magnify</v-icon>

</v-btn>

<v-btn icon>

<v-icon>mdi-heart</v-icon>

</v-btn>

<v-btn icon>

<v-icon>mdi-dots-vertical</v-icon>

</v-btn>

</v-toolbar>

<v-navigation-drawer

v-model="drawer"

absolute

width="100%"

height="auto"

temporary

<v-list

nav

dense

<v-list-item-group

v-model="group"

<v-list-item v-bind:class="{ 'bg-active': $route.path == '/' }">

<v-list-item-icon>

<v-icon>mdi-home</v-icon>

</v-list-item-icon>

<v-list-item-title>

<router-link to="/" class="flm">Home</router-link>

</v-list-item-title>

</v-list-item>

<v-list-item v-bind:class="{ 'bg-active': $route.path == '/nosotros' }">

<v-list-item-icon>

<v-icon>mdi-account-multiple</v-icon>

</v-list-item-icon>

<v-list-item-title>

<router-link to="/nosotros" class="flm">Nosotros</router-link>

</v-list-item-title>

</v-list-item>

<v-list-item v-bind:class="{ 'bg-active': $route.path == '/servicios' }">

<v-list-item-icon>

<v-icon>mdi-format-list-bulleted</v-icon>

</v-list-item-icon>

<v-list-item-title>

<router-link to="/servicios" class="flm">Servicios</router-link>

</v-list-item-title>

</v-list-item>

<v-list-item v-bind:class="{ 'bg-active': $route.path == '/contacto' }">

<v-list-item-icon>

<v-icon>mdi-earth</v-icon>

</v-list-item-icon>

<v-list-item-title>

<router-link to="/contacto" class="flm">Contacto</router-link>

</v-list-item-title>

</v-list-item>

</v-list-item-group>

</v-list>

</v-navigation-drawer>

</v-card>

</template>

Debajo de la etiqueta <template></template> colocamos el siguiente código de Vue JS en las etiquetas <script></script>


<script>
  export default {
    name: 'Menu',

    data: () => ({
      drawer: false,
      group: null,      
      items: [
        { title: 'Misión' },
        { title: 'Objetivo' },
        { title: 'Visión' },        
      ],
      ecosystem: [
        {
          text: 'vuetify-loader',
          href: 'https://github.com/vuetifyjs/vuetify-loader',
        },
        {
          text: 'github',
          href: 'https://github.com/vuetifyjs/vuetify',
        },
        {
          text: 'awesome-vuetify',
          href: 'https://github.com/vuetifyjs/awesome-vuetify',
        },
      ],
      importantLinks: [
        {
          text: 'Documentation',
          href: 'https://vuetifyjs.com',
        },
        {
          text: 'Chat',
          href: 'https://community.vuetifyjs.com',
        },
        {
          text: 'Made with Vuetify',
          href: 'https://madewithvuejs.com/vuetify',
        },
        {
          text: 'Twitter',
          href: 'https://twitter.com/vuetifyjs',
        },
        {
          text: 'Articles',
          href: 'https://medium.com/vuetify',
        },
      ],
      whatsNext: [
        {
          text: 'Explore components',
          href: 'https://vuetifyjs.com/components/api-explorer',
        },
        {
          text: 'Select a layout',
          href: 'https://vuetifyjs.com/getting-started/pre-made-layouts',
        },
        {
          text: 'Frequently Asked Questions',
          href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions',
        },
      ],
    }),

    methods: {
      menuItems() {
        return this.menu;
      }
    }

  }
</script>

export default {

name: 'Menu',

data: () => ({

drawer: false,

group: null,

items: [

{ title: 'Misión' },

{ title: 'Objetivo' },

{ title: 'Visión' },

ecosystem: [

{

text: 'vuetify-loader',

href: 'https://github.com/vuetifyjs/vuetify-loader',

{

text: 'github',

href: 'https://github.com/vuetifyjs/vuetify',

{

text: 'awesome-vuetify',

href: 'https://github.com/vuetifyjs/awesome-vuetify',

importantLinks: [

{

text: 'Documentation',

href: 'https://vuetifyjs.com',

{

text: 'Chat',

href: 'https://community.vuetifyjs.com',

{

text: 'Made with Vuetify',

href: 'https://madewithvuejs.com/vuetify',

{

text: 'Twitter',

href: 'https://twitter.com/vuetifyjs',

{

text: 'Articles',

href: 'https://medium.com/vuetify',

whatsNext: [

{

text: 'Explore components',

href: 'https://vuetifyjs.com/components/api-explorer',

{

text: 'Select a layout',

href: 'https://vuetifyjs.com/getting-started/pre-made-layouts',

{

text: 'Frequently Asked Questions',

href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions',

}),

methods: {

menuItems() {

return this.menu;

}

</script>

Y debajo de la etiqueta <script></script> colocamos los siguiente estilos CSS.


<style scope>

  .bgsel:hover {
    background: #afaeae;
  }

  .flm:link {
    text-decoration: none;
  }

  .v-application a {
    color: #ffffff!important;
  } 
  
</style>

.bgsel:hover {

background: #afaeae;

}

.flm:link {

text-decoration: none;

}

.v-application a {

color: #ffffff!important;

}

</style>

Mas adelante integraremos todos los componentes, pero para tener una idea el menú se debe ver de la siguiente manera.

Ahora pasaremos a crear el componente Footer o pie de página.

Footer

Para este elemento creo un nuevo archivo que será mi componente Footer llamado Footer.vue en src > components > Footer.vue


/pagina-web-vuejs-vuetify
  ├── .git
  ├── /node_modules
  ├── /public
  ├── /src
      ├── /assets
      ├── /components
          ├── Footer.vue // Creamos este Archivo 
          ├── Menu.vue 
      ├── /plugins
  ├── .gitignore
  ├── babel.config.js 
  ├── package-lock.json 
  ├── package.json 
  ├── README.md

/pagina-web-vuejs-vuetify

├── .git

├── /node_modules

├── /public

├── /src

├── /assets

├── /components

├── Footer.vue // Creamos este Archivo

├── Menu.vue

├── /plugins

├── .gitignore

├── babel.config.js

├── package-lock.json

├── package.json

├── README.md

Abro el archivo Footer.vue y comienzo agregando en el template lo siguiente.


<template
	dark	
>

	<v-card
		dark
		class="pt-5 mt-10"
	>
		
		<v-container>

			<div class="text-center">

				<p>
					Mi Proyecto © <span id="año"></span>. Todos los Derechos Reservados.				
				</p>

			</div>

		</v-container>

	</v-card>

</template>

<template

dark

<v-card

dark

class="pt-5 mt-10"

<v-container>

<p>

</p>

</div>

</v-container>

</v-card>

</template>

Debajo del template, agregamos el siguiente código Vue JS.


<script>

	export default {

		name: 'Footer',

		methods: {
			// Imprimo el año actual 
			obtenerAño() {
				var año = new Date().getFullYear();
				document.getElementById('año').innerHTML = año;
				//console.log(año);
			}
		},

		mounted () {
			this.obtenerAño()
		},

	}

</script>

export default {

name: 'Footer',

methods: {

// Imprimo el año actual

obtenerAño() {

var año = new Date().getFullYear();

document.getElementById('año').innerHTML = año;

//console.log(año);

}

mounted () {

this.obtenerAño()

}

</script>

Aún no hemos hecho la integración de los componentes, pero para tener una idea el footer con el menú se deben ver de la siguiente manera.

Bueno hasta aquí terminamos con esta segunda parte en donde creamos el Menú y el Footer, los cuales usaremos en todas las páginas.

Ten Paciencia, lo que quiero es que conozcas bien como crear este proyecto y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje.