title: Vue/Nuxt: How to make a component be truly dynamic?
body: <p>In order to use a dynamically-defined single page component, we use the <code>component</code> tag, thusly:</p>
  
  <pre><code>&lt;component v-bind:is="componentName" :prop="someProperty"/&gt;
  
  ...
  
  import DynamicComponent from '@/components/DynamicComponent.vue';
  
  ...
  components: {
      DynamicComponent
  },
  
  props: {
      componentName: String,
      someProperty: null,
  }
  </code></pre>
  
  <p>The problem is, this isn't really very dynamic at all, since every component we could ever possibly want to use here needs to be not only imported statically, but also registered in <code>components</code>.</p>
  
  <p>We tried doing this, in order at least to avoid the need to import everything:</p>
  
  <pre><code>created() {
      import(`@/components/${this.componentName}.vue`);
  },
  </code></pre>
  
  <p>but of course this fails, as it seems that <code>DynamicComponent</code> must be defined before reaching <code>created()</code>.</p>
  
  <p>How can we use a component that is truly dynamic, i.e. imported and registered at runtime, given only its name?</p>