mathieu
/
start_sf5_project_reboot
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

init vue app (frontend)

This commit is contained in:
Tchama 2022-10-01 20:53:53 +02:00
parent 7d2e364f5d
commit aaff9cb482
8 changed files with 1577 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app/assets/vue/components/App.vue Normal file
View File

@ -0,0 +1,21 @@
<template>
<div id="boum">
<div>hello <b>{{ username }}</b></div>
<div><b>{{ age }}</b> ans</div>
<input v-model="username">
</div>
</template>
<script>
export default {
name: 'app',
props: ['dataset'],
data() {
return {
user: this.dataset.user,
username: this.dataset.user.username,
age: this.dataset.user.age,
}
}
}
</script>

16
app/assets/vue/index.js Normal file
View File

@ -0,0 +1,16 @@
import { createApp } from 'vue'
import App from './components/App.vue'
const div = document.querySelector('div#app');
console.log(div);
const vue = createApp({
template: `<app :dataset="this.dataset" ></app>`,
data() {
return {
dataset: JSON.parse(div.dataset.app),
}
},
})
.component('app', App)
.mount('#app');

7
app/package.json
View File

@ -21,6 +21,11 @@
},
"dependencies": {
"sass": "^1.55.0",
"sass-loader": "^13.0.2"
"sass-loader": "^13.0.2",
"vue": "^3.2.40",
"vue-cli": "^2.9.6",
"vue-loader": "^17.0.0",
"vue-resource": "^1.5.3",
"vue-template-compiler": "^2.7.10"
}
}

26
app/src/Controller/VueController.php Normal file
View File

@ -0,0 +1,26 @@
<?php
namespace App\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
class VueController extends AbstractController
{
/**
* @Route("/vue", name="app_vue")
*/
public function index(): Response
{
return $this->render('vue/index.html.twig', [
'controller_name' => 'VueController',
'data' => [
'user' => [
'username' => 'Charles',
'age' => 31
]
]
]);
}
}

2
app/templates/base.html.twig
View File

@ -7,10 +7,12 @@
{# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #}
{% block stylesheets %}
{{ encore_entry_link_tags('app') }}
{{ encore_entry_link_tags('vue') }}
{% endblock %}
{% block javascripts %}
{{ encore_entry_script_tags('app') }}
{{ encore_entry_script_tags('vue') }}
{% endblock %}
</head>
<body>

13
app/templates/vue/index.html.twig Normal file
View File

@ -0,0 +1,13 @@
{% extends 'base.html.twig' %}
{% block title %}{{'My VueJS template'}}{% endblock %}
{% block body %}
<div class="container">
<h1>{{'My VueJS template'}}</h1>
<div id="app" data-app="{{ data | json_encode() | escape('html_attr') }}"></div>
</div>{{ dump() }}
{% endblock %}

8
app/webpack.config.js
View File

@ -22,6 +22,9 @@ Encore
*/
.addEntry('app', './assets/app.js')
// start VueJS application
.addEntry('vue', './assets/vue/index.js')
// enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
.enableStimulusBridge('./assets/controllers.json')
@ -57,7 +60,10 @@ Encore
})
// enables Sass/SCSS support
//.enableSassLoader()
.enableSassLoader()
// enable VueJS support
.enableVueLoader()
// uncomment if you use TypeScript
//.enableTypeScriptLoader()

1510
app/yarn.lock
View File

File diff suppressed because it is too large Load Diff