Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including vue-loader-subcomponent with all npm packages installed. Try it out:

require("virtual-file-loader/package.json"); // virtual-file-loader is a peer dependency. require("vue-loader/package.json"); // vue-loader is a peer dependency. var vueLoaderSubcomponent = require("vue-loader-subcomponent")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vue-loader-subcomponent v3.0.1

Load subcomponents inside vue files

vue-loader-subcomponent

Basic Usage

A subcomponent loader for vue-loader that allows the following extension:

<!-- 
  <list-title> subcomponent 
-->
<subcomponent name="list-title">
  <template>
      <h1>List Title</h1>
  </template>
</subcomponent>

<!-- 
  <list-item> subcomponent 
-->
<subcomponent name="list-item">
  <template>
      <li><a :href="item.href">{{item.text}}</a></li>
  </template>
  <script>
    export default {
      props: ['item']
    };
  </script>
</subcomponent>


<!-- 
   Main component as usual 
-->
<template>
  <div>
    <list-title />
    My fancy list:
    <ul>
      <list-item v-for="item in items" :item="item" />
    </ul>
  </div>
</template>
<script>
  export default {
    data() {
      return { items: [
          { href: "#", text: "index" },
      ]};
    }
  };
</script>

Configuration

You have to edit your webpack.config.js to:

// ...
module: {
  rules: [
    // ...,
    {
      test: /\.vue$/,
      use: ['vue-loader-subcomponent', {
        loader: 'vue-loader',
        options: {
          loaders: {
            subcomponent: 'vue-loader-subcomponent/subcomponent'
          }
        }
      }]
    }
  ]
}

So the vue-loader can recognize the subcomponent extension

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free