Bonjour à tous ! Tout d'abord, j'utilise vueJS avec symfony et webpack encore, je ne sait pas si c'est la bonne catégorie du coup :/

Voila, je tente d'utiliser vue-router, sauf que ca ne met rien. Quand je charge la page du router, ca affiche le menu de droite, et celui du haut, mais pas le contenu de configuration.vue, je ne comprend pas.

Voici le fichier de configuration de webpack encore:

const Encore = require('@symfony/webpack-encore');

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .addEntry('app', './assets/js/app.js')
    .addEntry('site', './assets/js/site.js')
    .addEntry('index', './assets/js/index.js')
    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
    .enableSassLoader()
    .enableVueLoader()
    .addLoader({
        test: /\.exec\.js$/,
        loader: 'script-loader'
    })
    .autoProvidejQuery()
    .autoProvideVariables({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
    })
;

module.exports = Encore.getWebpackConfig();

Voila mon fichier app:

// CSS
import '../site/css/bootstrap.min.css';
import '../plugins/perfect-scrollbar/css/perfect-scrollbar.css';
import '../plugins/morrisjs/morris.css';
import '../plugins/c3-master/c3.min.css';
import '../plugins/toast-master/css/jquery.toast.css';
import '../plugins/switchery/dist/switchery.min.css';
import '../plugins/dropify/dist/css/dropify.min.css';
import '../plugins/fontawesome/css/all.css';

import '../css/panel.css'
import '../css/spinners.css';
import '../css/animate.css';
// IMAGES
import '../images/favicon.png'

// JS
import 'd3/dist/d3';
import 'popper.js/dist/popper';

import '../plugins/bootstrap/js/bootstrap.min';
import '../plugins/ps/perfect-scrollbar.jquery.min';
import '../plugins/c3-master/c3.min';
import '../plugins/dropify/dist/js/dropify.min';
import '../plugins/switchery/dist/switchery.min';

import './waves';
import './sidebarmenu';
import './custom';
import './dashboard-projects';

import Minecraft from '../components/minecraft/Panel';
import PaymentPaypal from '../components/Payment/Paypal';
import Configuration from  '../components/Minecraft/Tabs/Configuration.vue';

import Vue from 'vue';
import VueRouter from 'vue-router';


Vue.use(VueRouter);

const router= new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: "home",
            component: Configuration
        }
    ]
});

new Vue({
    el: '#main-wrapper',
    router,
    components: {
      Minecraft,
      Configuration,
      PaymentPaypal
    }
}).$mount('#main-wrapper');

export default router

Mon fichier App.vue:

<template>
    <div class="container-fluid">
        <div class="row page-titles">
            <div class="col-md-4 col-sm-12 align-self-center">
                <h4 class="weight-500 m-0">
                    <img src="../../images/mc.png" width="45" class="m-r-15" alt="Logo minecraft"/> Test 1 |
                    <span style="cursor: pointer;" data-clipboard-text="test-1.dh.net" class="text-muted clipboard-copy"><small>test-1.dh.net <i class="fas fa-clipboard"></i></small></span>
                </h4>
            </div>
            <div class="col-md-8 col-sm-12 align-self-center text-right">
                <ul class="nav nav-tabs customtab pro-customtab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#general" role="tab"><span>
                            <i class="fas fa-tachometer-alt"></i> Général</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#console" role="tab"><span><i class="fas fa-terminal"></i> Console</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#joueurs" role="tab"><span><i class="fas fa-users"></i> Joueurs</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#configuration" role="tab"> <span><i class="fas fa-cogs"></i> Configuration</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#ftp" role="tab"> <span><i class="fas fa-network-wired"></i> FTP / MYSQL </span></a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="tab-content">
            <!-- Router view -->
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Panel'
    }
</script>

<style scoped>

</style>

et pour finir configuration.vue:

<template>
    <div>
        <div class="row">

            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title text-uppercase m-b-25">Serveur</h4>

                        <form class="form" action="">
                            <div class="form-group m-b-10 row">
                                <label class="col-12 col-form-label">Nom du serveur</label>
                                <div class="col-12">
                                    <input class="form-control" type="text" placeholder="Nom">
                                </div>
                            </div>

                            <div class="form-group m-b-10 row">
                                <label class="col-12 col-form-label">Nombre de joueurs</label>
                                <div class="col-12">
                                    <input class="form-control" type="number" placeholder="Nombre de joueurs">
                                </div>
                            </div>

                            <div class="form-group m-b-10 row">
                                <label class="col-12 col-form-label">Motd du serveur</label>
                                <div class="col-12">
                                    <input class="form-control" type="text" placeholder="Motd">
                                </div>
                            </div>

                            <div class="form-group m-b-10 row">
                                <label for="mapselect" class="col-12 col-form-label">Carte principale</label>
                                <div class="col-12">
                                    <select class="custom-select col-12" id="mapselect">
                                        <option selected="">Choisir une map...</option>
                                        <option value="1">One</option>
                                        <option value="2">Two</option>
                                        <option value="3">Three</option>
                                    </select>
                                </div>
                            </div>


                            <div class="form-group">
                                <label for="input-file-now">Icône du serveur</label>
                                <input type="file" id="input-file-now" class="dropify-fr" data-height="174" />
                            </div>

                        </form>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title text-uppercase m-b-25">Général</h4>

                        <form class="form">

                            <div class="form-group">
                                <input type="checkbox" class="js-switch" data-color="#7ad835" data-size="small" checked />
                                <label class="">Whitelist</label>
                            </div>

                            <div class="form-group">
                                <input type="checkbox" class="js-switch" data-color="#7ad835" data-size="small" checked />
                                <label class="">Online mode</label>
                            </div>

                            <div class="form-group">
                                <input type="checkbox" class="js-switch" data-color="#7ad835" data-size="small" checked />
                                <label class="">Structures</label>
                            </div>

                            <div class="form-group">
                                <input type="checkbox" class="js-switch" data-color="#7ad835" data-size="small" checked />
                                <label class="">Command blocks</label>
                            </div>

                            <div class="form-group">
                                <input type="checkbox" class="js-switch" data-color="#7ad835" data-size="small" checked />
                                <label class="">Nether</label>
                            </div>

                            <div class="form-group">
                                <input type="checkbox" class="js-switch" data-color="#7ad835" data-size="small" checked />
                                <label class="">Succès</label>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title text-uppercase m-b-25">Environnement</h4>

                        <form class="form">

                            <div class="form-group">
                                <input type="checkbox" class="js-switch" data-color="#7ad835" data-size="small" checked />
                                <label class="">PNJ/Animaux</label>
                            </div>

                            <div class="form-group">
                                <input type="checkbox" class="js-switch" data-color="#7ad835" data-size="small" checked />
                                <label class="">Monstres</label>
                            </div>

                            <div class="form-group">
                                <input type="checkbox" class="js-switch" data-color="#7ad835" data-size="small" checked />
                                <label class="">Hardcore</label>
                            </div>

                            <div class="form-group">
                                <input type="checkbox" class="js-switch" data-color="#7ad835" data-size="small" checked />
                                <label class="">PVP</label>
                            </div>

                        </form>
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title pull-left text-uppercase m-b-25">Plugins</h4>

                        <ul class="nav nav-pills nav-pills-tablet pull-right m-t-0 m-b-40">
                            <li class="nav-item">
                                <a href="#installed" class="nav-link active" data-toggle="tab">Installés</a>
                            </li>
                            <li class="nav-item">
                                <a href="#install" class="nav-link" data-toggle="tab">Ajouter un plugin</a>
                            </li>
                        </ul>
                        <div class="clearfix"></div>

                        <div class="tab-content br-n pn">
                            <div id="installed" class="tab-pane active">
                                <table class="table primary-table">
                                    <thead>
                                    <tr>
                                        <th>Nom</th>
                                        <th>Etat</th>
                                        <th class="text-right pr-5">Actions</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>Plugin 1</td>
                                        <td>
                                            <div class="badge badge-danger">
                                                <i class="fas fa-times font-14 pt-1 pb-1 pl-2 pr-2"></i>
                                            </div>
                                        </td>
                                        <td class="text-right pr-4">
                                            <div class="btn-group">
                                                <button class="btn btn-xs btn-success">Activer</button>
                                                <button class="btn btn-xs btn-dark"><i class="fas fa-trash"></i></button>
                                            </div>
                                        </td>
                                    </tr>

                                    <tr>
                                        <td>Plugin 2</td>
                                        <td>
                                            <div class="badge badge-success" style="background-color: #7AD835">
                                                <i class="fas fa-check font-14 pt-1 pb-1 pl-2 pr-2"></i>
                                            </div>
                                        </td>
                                        <td class="text-right pr-4">
                                            <div class="btn-group">
                                                <button class="btn btn-xs btn-danger">Désactiver</button>
                                                <button class="btn btn-xs btn-dark"><i class="fas fa-trash"></i></button>
                                            </div>
                                        </td>
                                    </tr>



                                    </tbody>
                                </table>
                                <div class="text-right page-n">
                                    Précédent
                                    <a href="#" class="active">1</a> <a href="#">2</a> <a href="#">3</a> ... <a href="#">10</a> <a href="#">11</a> <a href="#">12</a>
                                    <a href="#">Suivant</a>
                                </div>

                            </div>

                            <div id="install" class="tab-pane">
                                <div class="form-group row m-b-10">
                                    <label class="col-12 col-form-label">Rechercher un plugin</label>
                                    <div class="col-12">
                                        <input class="form-control" placeholder="Nom du plugin">
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title pull-left text-uppercase m-b-25">Cartes</h4>

                        <ul class="nav nav-pills nav-pills-tablet pull-right m-t-0 m-b-40">
                            <li class="nav-item">
                                <a href="#maps" class="nav-link active" data-toggle="tab">Liste des cartes</a>
                            </li>
                            <li class="nav-item">
                                <a href="#add-map" class="nav-link" data-toggle="tab">Ajouter une carte</a>
                            </li>
                        </ul>
                        <div class="clearfix"></div>

                        <div class="tab-content br-n pn">
                            <div id="maps" class="tab-pane active">
                                <table class="table primary-table">
                                    <thead>
                                    <tr>
                                        <th>Nom</th>
                                        <th class="text-right pr-5">Actions</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>Carte 1</td>

                                        <td class="text-right pr-4">
                                            <button class="btn btn-xs btn-dark"><i class="fas fa-trash"></i></button>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                                <div class="text-right page-n">
                                    Précédent
                                    <a href="#" class="active">1</a> <a href="#">2</a> <a href="#">3</a> ... <a href="#">10</a> <a href="#">11</a> <a href="#">12</a>
                                    <a href="#">Suivant</a>
                                </div>

                            </div>

                            <div id="add-map" class="tab-pane">
                                <div class="form-group m-b-10 row">
                                    <label class="col-12 col-form-label">Nom de la carte</label>
                                    <div class="col-12">
                                        <input class="form-control" type="text" placeholder="Nom">
                                    </div>
                                </div>
                                <div class="form-group m-b-10 row">
                                    <label class="col-12 col-form-label">Version de la carte</label>
                                    <div class="col-12">
                                        <select class="custom-select col-12" id="inlineFormCustomSelect3">
                                            <option selected="">Choisir une version ...</option>
                                            <option value="1">1.13</option>
                                            <option value="2">1.12</option>
                                            <option value="3">1.11</option>
                                            <option value="3">1.10</option>
                                            <option value="3">1.9</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group m-b-10 row">
                                    <label class="col-12 col-form-label">Seed de la carte</label>
                                    <div class="col-12">
                                        <input class="form-control" type="text" placeholder="Seed">
                                    </div>
                                </div>
                                <div class="form-group m-b-10 row">
                                    <label class="col-12 col-form-label">Type de carte</label>
                                    <div class="col-12">
                                        <select class="custom-select col-12" id="inlineFormCustomSelect3">
                                            <option selected="">Choisir un type ...</option>
                                            <option>Normal</option>
                                            <option>Flat</option>
                                            <option>Void</option>
                                            <option>Amplified</option>
                                            <option>Larges Biomes</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="card bg-danger">
                    <div class="card-body text-white">
                        <h4 class="card-title text-uppercase m-b-25 text-white">Zone de danger</h4>

                        Réinitialiser le serveur efface l'intégralité des maps, fichiers de configuration et plugins. <strong>Cette action est irréversible.</strong><br>
                        <button class="btn btn-dark mt-3">Réinitialiser mon serveur</button>
                        <hr>

                        Supprimer le serveur termine immédiatement votre abonnement et détruit tous les fichiers du serveur. <strong>Cette action est irréversible.</strong><br>
                        <button class="btn btn-dark mt-3">Supprimer mon serveur</button>

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Configuration',
        mounted() {
                // Switchery
                Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
                $('.js-switch').each(function() {
                    new Switchery($(this)[0], $(this).data());
                });
            // Translated
            $('.dropify-fr').dropify({
                messages: {
                    default: 'Glissez-déposez un fichier ici ou cliquez',
                    replace: 'Glissez-déposez un fichier ou cliquez pour remplacer',
                    remove: 'Supprimer',
                    error: 'Désolé, le fichier trop volumineux'
                }
            });

        },
        methods: {
            goBack () {
                window.history.length > 1
                    ? this.$router.go(-1)
                    : this.$router.push('/')
            }
        }
    }
</script>

<style scoped>

</style>

Je débute avec vueJS, je suis donc un peu perdu, j'ai cherché sur google 'vue-router webpack', j'ai regarde la documentation, mais rien, tout me dit que c'est comme cela que je dois faire. Je pense avoir merdé dans la configuration de webpack, mais je bloque totalement, je demande donc votre précieuse aide.

Merci à tous d'avoir lu, et de donné des réponses.