I followed the directions for registering and using custom elements here:
https://alligator.io/vuejs/custom-elements/
I'm using the standard Webpack template for Vue.
When I run
npm run build I expect to get a packaged web component file called element.js in the dist directory. Nothing happens, though. Does anyone know if there are any extra steps needed? The documentation doesn't make this clear.
This produced the following files in my project:
<template> <div id="app"> <example myProp="I can pass props!"></example> </div> </template> <script> import Example from './components/example.Vue' export default { name: 'app', components: { Example } } </script> <style> </style> main.js
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import vueCustomElement from 'vue-custom-element' Vue.config.productionTip = false Vue.use(vueCustomElement); /* eslint-disable no-new */ import Example from './components/Example.vue'; // Configure Vue to ignore the element name when defined outside of Vue. Vue.config.ignoredElements = [ 'example-component' ]; // Enable the plugin Vue.use(vueCustomElement); // Register your component Vue.customElement('example-component', Example, { // Additional Options: https://github.com/karol-f/vue-custom-element#options }); new Vue({ el: '#app', template: '<App/>', components: { App } }) components/example.vue
<template> <p>Dynamic prop value: {{myProp}}</p> </template> <script> export default { props: ['myProp'] } </script> package.json
{ "name": "example", "version": "1.0.0", "description": "A Vue.js project", "author": "", "private": true, "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "build": "node build/build.js" }, "dependencies": { "vue": "^2.5.2", "vue-custom-element": "^2.0.0" }, "devDependencies": { "autoprefixer": "^7.1.2", "babel-core": "^6.22.1", "babel-helper-vue-jsx-merge-props": "^2.0.3", "babel-loader": "^7.1.1", "babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-transform-runtime": "^6.22.0", "babel-plugin-transform-vue-jsx": "^3.5.0", "babel-preset-env": "^1.3.2", "babel-preset-stage-2": "^6.22.0", "chalk": "^2.0.1", "copy-webpack-plugin": "^4.0.1", "css-loader": "^0.28.0", "extract-text-webpack-plugin": "^3.0.0", "file-loader": "^1.1.4", "friendly-errors-webpack-plugin": "^1.6.1", "html-webpack-plugin": "^2.30.1", "node-notifier": "^5.1.2", "optimize-css-assets-webpack-plugin": "^3.2.0", "ora": "^1.2.0", "portfinder": "^1.0.13", "postcss-import": "^11.0.0", "postcss-loader": "^2.0.8", "rimraf": "^2.6.0", "semver": "^5.3.0", "shelljs": "^0.7.6", "uglifyjs-webpack-plugin": "^1.1.1", "url-loader": "^0.5.8", "vue-loader": "^13.3.0", "vue-style-loader": "^3.0.1", "vue-template-compiler": "^2.5.2", "webpack": "^3.6.0", "webpack-bundle-analyzer": "^2.9.0", "webpack-dev-server": "^2.9.1", "webpack-merge": "^4.1.0" }, "engines": { "node": ">= 4.0.0", "npm": ">= 3.0.0" }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ] } After including the script files for the custom element and vue libraries, my index.html looks like this:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>example</title> <script src="vue/dist/vue.min.js"></script> <script src="vue-custom-element/dist/vue-custom-element.js"></script> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html> 1 Answers
Answers 1
The docs and the alligator.io article don't explain it, but in order to work, a vue-custom-element still requires the Vue.js and vue-custom-element libraries.
So you have to use the <script> includes that webpack generates in the index.html.
Found a tutorial which mentions that: http://vuetips.com/vue-web-components
This implementation requires Vue.js core files and the vue-custom-element library to be included in your page.
It also mentions https://github.com/kartsims/vue-customelement-bundler which is a template that builds everything into a single .js file.
0 comments:
Post a Comment