Open jcandan opened 2 years ago
Mentioned this issue in https://github.com/uswds/uswds/discussions/4677#discussioncomment-3349160.
I was able to get javascript working with the following changes to my project:
# /resources/views/app.blade.php
<link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
- <script src="{{ mix('/js/app.js') }}" defer></script>
<title>My Title</title>
</head>
<body>
@inertia
+ <script src="js/uswds-init.js"></script>
+ <script src="js/uswds.js"></script>
+ <script src="{{ mix('/js/app.js') }}" defer></script>
</body>
# /webpack.mix.js
.postCss('resources/css/app.css', 'public/css', [
//
]);
+
+mix.copy('node_modules/uswds/dist/js/', 'public/js');
Note: This does not fix all javascript issues. For instance, I was not able to use the
<us-accordion>
component. But I was able to pull in the component code directly from USWDS documentation.
Problem
The USWDS-vue documentation notes that the styles from the
uswds
NPM package needs to be explicitly included, but the javascript does not.I assume this is because of some dependency mechanism in
uswds-vue
. However, when adopting any javascript-reliant components, they do not function (i.e. my accordion implementation does not uncollapse when clicked).Another indication that this does not work is the use of the
window.uswdsPresent
global provided byuswds/src/js/start.js
.Proposed resolution
Please fix this bug, or correct the documentation to direct developers how to appropriately implement Javascript from USWDS.