Javascript is not loading

jcandan commented 2 years ago

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 by uswds/src/js/start.js.

The above should be true, as is the case in my vanilla USWDS implementation.

Proposed resolution

Please fix this bug, or correct the documentation to direct developers how to appropriately implement Javascript from USWDS.

jcandan commented 2 years ago

Mentioned this issue in https://github.com/uswds/uswds/discussions/4677#discussioncomment-3349160.

jcandan commented 2 years ago

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.

thepipster / uswds-vue

Javascript is not loading #4

Problem

Proposed resolution