Vue/cli + Bulma + Firebase

Nous allons décrire les bases d’une app. en Vuejs avec framework Bulma (Buefy) et une databese dans Firebase/Firestore.

D’abord je crée un vue/cli. Accepter la proposition par défaut.

vue create my-app

Ensuite j’installe Buefy (un css framework basé sur Bulma)

npm install buefy

On ajoute ensuite dans main.js

import Vue from 'vue'
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'

Vue.use(Buefy)

!!! ATTENTION si dans le code par exemple on insère une image ou autre vebant d’un autre domaine que Localhost ou autre => on a une erreur CORS ( Cross Origin .. ) il faut que tout vient de localhost ou autre

On install Fontawesome

npm install --save @fortawesome/fontawesome-free

Et dans le fichier main.js

import '@fortawesome/fontawesome-free/css/all.css'
import '@fortawesome/fontawesome-free/js/all.js'

On install Router

npm install vue-router

Dans le fichier main.js on ajoute

import router from './router'
// et dans App
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

Ensuite on crée un dossier Router et dedans un fichier index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

Dans App.vue il faut mettre la navigation

<template>
  <div id="app" class="container">
      <b-navbar>
        <template slot="brand">
          <b-navbar-item tag="router-link" :to="{ path: '/' }" >
                <img
                    src="./assets/buefy-logo.png"
                    alt="Lightweight UI components for Vue.js based on Bulma"
                >
          </b-navbar-item>
        </template>
        <template slot="start">
          <b-navbar-item href="#">
            <router-link to="/">Home</router-link>
          </b-navbar-item>
          <b-navbar-item href="#">
            <router-link to="/about">About</router-link>
          </b-navbar-item>
          <b-navbar-item href="#">
            <router-link to="/dashboard">Dashboard</router-link>
          </b-navbar-item>
        </template>

        <template slot="end">
          <b-navbar-item tag="div">
            <div class="buttons">
              <router-link to="/register" class="button is-primary">
                <strong>Sign up</strong>
              </router-link>
              <router-link to="/login" class="button is-light">Log in</router-link>
            </div>
          </b-navbar-item>
        </template>
      </b-navbar>
      <router-view />
  </div>
</template>