971ScrollTo, Vue and Vue-Router

After navigating to a certain page - let's call it Chat, it want to scroll programmatically to the bottom of the page. In pure JS it would look like this:

window.scrollTo(0,document.body.scrollHeight);

Which words fine - but it does not work after Vue-Router changes. For that to work, the rounter config needs to be changed:

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else if (to.name === 'Chat'){
      return { x: 0, y: window.innerHeight }
    }
    return false
  }
})

If a savedPosition exist (in case of back/forward navigation with browser buttons), return that saved position, if the page is called Chat, then scroll y to the window.innerHeight.

968Clean Vue Distribution Files

Removing the timestamp from css and js distribution files.
File: vue.config.js

module.exports = {
  publicPath: '',
  chainWebpack: config => {
    if(config.plugins.has('extract-css')) {
      const extractCSSPlugin = config.plugin('extract-css')
      extractCSSPlugin && extractCSSPlugin.tap(() => [{
        filename: 'css/[name].css',
        chunkFilename: 'css/[name].css'
      }])
    }
  },
  configureWebpack: {
    output: {
      filename: 'js/[name].js',
      chunkFilename: 'js/[name].js'
    }
  }
}

timestamp Vue

964Gettting HTML Content from index.html into Vue

Vue index.html:

  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <div id="modalContent" style="display:none">
      <div id="modal1">
        Hello Modal Content Hello Modal Content
      </div>
    </div>
  </body>

Why add another hidden div to index.html? To be able to edit/add content without rebuilding and running npm run build.

In Vue:

  document.getElementById('modal1').innerHTML

Actually basic JS, nothing special to Vue.

javascript Vue

963General JS Variables in Vue

Accesses JS from outside Vue:

index.html

...
<script>
  var test = "test";
</script>
...

In Vue:

  window.test

Obvious, but nevertheless

javascript Vue

962Zooming and Panning in D3 with Bounds

Standard d3.zoom, pans to infinity:

this.zoom = d3.zoom()
  .scaleExtent([1/2, 100])
  .on("zoom", () => {
    g.attr("transform", d3.event.transform)
  })

Restrict pan to visible area, adjust padding (p):

this.zoom = d3.zoom()
  .scaleExtent([1/2, 100])
  .on("zoom", () => {
    var p = 0.95, e = d3.event.transform, w = this.width, h = this.height
    e.x = Math.min(Math.max(e.x, -w * e.k * p), w * p)
    e.y = Math.min(Math.max(e.y, -h * e.k * p), h * p)
    g.attr("transform", e)
  })

Vue 2.x, D3 5.0

d3 Vue zoom

961A Relative Path for Vue

Create a new file, call it vue.config.js

Add:

module.exports = {
  publicPath: ''
}

This overwriting the default value of '/'.

Source: https://cli.vuejs.org/config/#publicpath

path relative Vue

948Adding a CSS Framework to Vue

In your Vue Project, add your favourite CSS Framework vis npm.

npm install tachyons --save-dev

In main.js add:

import 'tachyons/css/tachyons.min.css' 
// no need for ./../node_modules/ prefix

Adding a Static CSS File

Add style.css to /public/:

In /public/index.html reference the Style Sheet:

<link rel="stylesheet" type="text/css" href="style.css">

CSS Vue

898AWS S3, Vue and History Mode

Single-page Applications (SPA) make with Vue or React can take advantage of HTML5's History Mode, where the URL in the browser window is changing - but all the changes are happening in the client. This works great, if the user only follows the links, but it breaks when the user wants to reload the page or goes to and unknown (404) page. The server kicks on and gives you a 404.

There are ways to deal with this, vue-router has a list: https://router.vuejs.org/en/essentials/history-mode.html

Basically, what's happening: rewrite all requests to index.html - the entry point of your SPA. We will also have to deal with 404 on the client side, but that's also described above. Origin -> Origins Path to path in S3. No need to adjust index and error paths in S3

AWS CloudFront History Mode S3 SPA Vue