VueJs

Memo

Propriétés

Validation

validator: (value: [boolean, object]) => value instanceof Vue || typeof value === 'object'

vue-cli

Configuration

La configuration de vue-cli se fait dans le fichier vue.config.js à la racine du projet.

Spécifier la destination des builds

const path = require("path");

module.exports = {
  outputDir: path.resolve(__dirname, "../web/XXX"),
  assetsDir: "../web/assets"
}

Eviter l'erreur "Invalid host header"

module.exports = {
  devServer: {
	  disableHostCheck: true
  }
}

Webpack - Corriger le problème de connexion WS lors de l'utilisation d'un container

docker-compose.yml

environment:
      - CODESANDBOX_SSE=true

Vite - Configurer le port WS du client

vite.config.js

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    hmr: {
      clientPort: 40000
    }
  }
}

Vite - Permettre les imports de modules

vite.config.js

import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  plugins: [tsconfigPaths()]
}

Correction de bugs

vue-cli Super expression must either be null or a function

Lors de l'initialisation d'un nouveau projet avec vue-cli, l'exécution des tests “unit” peut échouer avec le message d'erreur suivant :

vue-cli Super expression must either be null or a function

Voici la solution pour contourner le problème en attendant un correctif :

Fichier package.json :

"scripts": {
  "test": "vue-cli-service test:unit --require tests/unit/setup.js"
}

Fichier tests/unit/setup.js :

require('jsdom-global')();

window.Date = Date;

Structure de base

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <link rel="stylesheet" href="assets/style.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.js"></script>
</head>
<body>
    <div id="app">
        <h1 class="app-header ui header">
            Title <span class="right">¯\_(ツ)_/¯</span>
        </h1>
        <div class="app-body">
            {{ message }}
        </div>
        <div class="app-footer">
            <div class="content">¯\_(ツ)_/¯</div>
        </div>
    </div>
    <script>
    new Vue({
        el: '#app',
        data: {
            message: Hello world,
            data: {}
        },
        created () {
            that = this;
            fetch('/data.json', {
                credentials: 'include'
            })
                .then(function(response) {
                    response.json().then(function(result) {
                        that.data = result.data;
                    });
                })
        }
    });
    </script>
</body>
</html>

A CLASSER

const path = require("path");

module.exports = {
  devServer: {
	  disableHostCheck: true
  },
  outputDir: path.resolve(__dirname, "../web"),
  publicPath: '/simulation/gcid/',
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
	args[0].minify = {}
        return args
      })
  }
}

props: {
  active: [Boolean, false, 'sync'],
  clickAway: [Boolean, true],
  escEscape: [Boolean, true],
  leaveDealy: [Number, 300],
  modalClass: [Object, ''],
  transition: [Boolean, true]
}