Find me in app/views/landing/index.html.erb
+ + +``` + +3. Change `app/javascript/packs/hello_vue.js` to: + +```javascript +import Vue from 'vue' +import App from '../app.vue' + +document.addEventListener('DOMContentLoaded', () => { + const app = new Vue({ + render: h => h(App), + el: '#hello_vue_app' + }).$mount() +}) +``` + +4. Setup a sample page as a home page by updating `config/routes.rb`: + +```ruby + root 'landing#index' +``` + +### Use Webpacker assets in the application + +1. Enable Webpacker with `SplitChunks`: + + * Enable `SplitChunks` with default config by adding to `config/webpack/environment.js`: + + ```js + environment.splitChunks() + ``` + + * Enable Webpacker by updating `app/views/layouts/application.html.erb`: + + Change: + + ```erb + <%= stylesheet_link_tag 'application', media: 'all' %> + <%= javascript_pack_tag 'application' %> + ``` + + to: + + ```erb + <%= stylesheet_packs_with_chunks_tag 'application', 'hello_vue', media: 'all' %> + <%= javascript_packs_with_chunks_tag 'application', 'hello_vue' %> + ``` + +2. Verify locally that vue.js is working and `SplitChunks` is enabled + +```bash +bin/rails s +open "http://localhost:3000/" +``` + +Expect to see + + +The `javascript_packs_with_chunks_tag` and `stylesheet_packs_with_chunks_tag` helpers split assets +into small size chunks and create html tags for them: + +```html + + + +``` + +## Install Jest for Component Unit Tests + +1. Add Jest with required dependencies + +```bash +yarn add --dev jest @vue/test-utils vue-jest babel-core@^7.0.0-bridge.0 babel-jest jest-serializer-vue +``` + +2. Configure Jest in `package.json` (including the Coverage enabling): + +```json + "scripts": { + "test": "jest" + }, + "jest": { + "verbose": true, + "testURL": "http://localhost/", + "roots": [ + "test/javascript" + ], + "moduleDirectories": [ + "node_modules", + "app/javascript" + ], + "moduleNameMapper": { + "^@/(.*)$": "{{ message }}
+Find me in app/views/landing/index.html.erb
+ + diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb new file mode 100644 index 0000000..2b214d9 --- /dev/null +++ b/app/views/layouts/application.html.erb @@ -0,0 +1,235 @@ + + + +You may have mistyped the address or the page may have moved.
+If you are the application owner check the logs for more information.
+Maybe you tried to change something you didn't have access to.
+If you are the application owner check the logs for more information.
+If you are the application owner check the logs for more information.
+Hello Vue!
+