Charger CSS & Javascript d'un template correctement


#1

Bonjour,

Maintenant que je connais à peut près les bases de VueJS, je me demandais comment charger du css et du javascript d’un template ? Peut on le faire avec webpack ? Car le mettre dans l’index.html fais planter le javascript etc et faire un import directement fais aussi bugger

Merci !


#2

Salut Mathiis,

En effet, via webpack on peut employer le vue-loader qui permet de construire des fichiers .vue contenant à la fois le <template> contenant le markup vue, le <script> contenant l’instance Vue de la composante, puis le <style> qui contiendra les css de la composante.

Tu peux en savoir davantage sur la page du guide Vue sur les Single File Components.


#3

Merci pour ta réponse ! Pour le style j’ai réussi, en revanche, pour charger du javascript en type text/javascript comme par exemple jquery, bootstrap, ou un simple fichier fais maison avec exemple du ajax, comment je peux faire ? J’ai effectué un mais cela ne marche pas, il ne l’interprète pas correctement, donc je suppose qu’il y a aussi un moyen avec webpack de faire en sorte que ?


#4

Alors dans ce cas, pour ces autres javascript, il faudra les inclure à même la page comme telle, et non pas au sein d’une composante Vue, qui ne devrait s’en tenir aux fonctionnalités de la composante même.

En particulier pour bootstrap, à noter que si ton approche sera de prendre charge des fonctionnalisés js de bootstrap (accordéons, drop downs, tooltips, scroll spy) à l’intérieur d’une composante Vue (c’est la composante Vue qui inclue ces éléments), il faudra employer une variante vue des fonctionnalités bootstrap et non utiliser les librairies js de bootstrap. Si par contre ta composante Vue ne s’en tient qu’à une partie de ta page, alors là j’emploierait la librairie js de bootstrap normale. Les css de bootstrap fonctionnent dans vue sans problème, évidemment.