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>
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.
Related
These are my setup files
Router.js
import { createWebHistory, createRouter } from 'vue-router';
import MyComponent from './component/MyComponent.vue';
const routes = [{
path: 'main/publish/tasks',
component: MyComponent
}]
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
index.js
import { createApp, configureCompat } from 'vue';
import router from './Router';
import MainApp from './MainApp.vue';
const app = createApp(MainApp);
app.use(router);
configureCompat({
// default everything to Vue 2 behavior
MODE: 2,
});
app.mount('.vue-app');
MainApp.vue
<template>
<router-view />
</template>
<script>
export default{
name: 'MainApp'
}
</script>
Edit:
MyComponent.vue
<template>
<div> Hello world </div>
</template>
<script>
export default {
name: 'MyComponent'
}
</script>
package.json
{
"name": "Demo Project",
"version": "6.0.0",
"dependencies": {
"#vue/compat": "^3.2.39",
"#vue/compiler-sfc": "^3.2.39",
"core-js": "3.1.2",
"mitt": "^3.0.0",
"moment": "^2.29.4",
"regenerator-runtime": "^0.13.9",
"vue": "^3.2.41",
"vue-carousel": "^0.18.0",
"vue-click-outside": "^1.1.0",
"vue-color": "^2.8.1",
"vue-custom-element": "^3.3.0",
"vue-debounce": "^2.6.0",
"vue-multiselect": "^2.1.6",
"vue-router": "^4.1.6",
"vuex": "^4.0.2",
"whatwg-fetch": "^3.6.2"
},
"devDependencies": {
"#babel/core": "^7.11.6",
"#babel/plugin-proposal-class-properties": "^7.12.13",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/preset-env": "^7.11.5",
"#types/jest": "^28.1.8",
"#types/node": "^14.14.45",
"#typescript-eslint/eslint-plugin": "^5.31.0",
"#typescript-eslint/parser": "^5.31.0",
"#vue/test-utils": "^1.3.0",
"autoprefixer": "^10.4.12",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^28.1.3",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^4.3.0",
"file-loader": "^6.2.0",
"license-checker": "^25.0.1",
"mini-css-extract-plugin": "^0.12.0",
"postcss": "^8.4.16",
"postcss-loader": "^4.3.0",
"terser-webpack-plugin": "^4.2.3",
"ts-loader": "^8.0.18",
"typescript": "^4.0.8",
"vue-jest": "^3.0.7",
"vue-loader": "^17.0.0",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
"webpack-manifest-plugin": "^2.2.0",
"webpack-merge": "^5.7.3"
},
"resolutions": {
"lodash": "^4.17.21"
},
"scripts": {
"dev": "webpack --config webpack.dev.js",
"watch": "webpack --config webpack.dev.js --watch",
"build": "webpack --config webpack.prod.js",
"test": "jest src"
}
}
This code setup leads me to this error
Can anyone help me what I'm doing wrong? Everything works when I remove <router-view/>. I can render component fine by importing and adding it to MainApp.vue. But cannot get it rendered through <router-view/>.
package.json file
{
"name": "myapp",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^6.2.0",
"#fortawesome/free-regular-svg-icons": "^6.2.0",
"#fortawesome/free-solid-svg-icons": "^6.2.0",
"#fortawesome/react-fontawesome": "^0.2.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.4.0"
},
"devDependencies": {
"#types/react": "^18.0.17",
"#types/react-dom": "^18.0.6",
"#vitejs/plugin-react": "^2.1.0",
"autoprefixer": "^10.4.12",
"postcss": "^8.4.16",
"tailwindcss": "^3.1.8",
"vite": "^3.1.0"
}
}
icontext component here i am trying to add social media icons:
import React from 'react'
const IconsText = () => {
return (
<div className="container-fluid bg-[#1d3943]">
</div>
)
}
export default IconsText
I don't know what i am doing wrong i tried add code but failed what should I do to add icons
In order to add font-awesome icons you need to make sure you have installed it first. Go to your project folder and execute the command npm install react-icons or yarn add react-icons. Now in your component you should import the react-icons module like:
import * as aiicons from 'react-icons/ai'
react-icons has each folder corresponding to what you wanna use. Hope this helps!
Check out the font awesome guide on importing icons in react
The style of the page takes time to load when the user open the page or make reload in the page. I don't have much time working with next js, still learning the hard skills of the framework.
This is an gif showing when i open the page. This also happens when I reload or enter a page and come back right away: https://imgur.com/J24YAPl
This is my _document.jsx:
import React from 'react';
import Document, { Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components';
export default class MyDocument extends Document {
static getInitialProps({ renderPage }) {
const sheet = new ServerStyleSheet();
const page = renderPage(App => props => sheet.collectStyles(<App {...props} />));
const styleTags = sheet.getStyleElement();
return { ...page, styleTags };
}
render() {
return (
<html lang="en">
<Head>
{this.props.styleTags}
<link rel="manifest" href="/manifest.webmanifest" />
<meta name="them-color" content="#189AB4" />
<link rel="apple-touch-icon" sizes="72x72" href="/next/icons/icon-72x72.png" />
</Head>
<body>
<Main />
<div id="portal" />
<NextScript />
</body>
</html>
);
}
}
and this is my package.json:
{
"name": "novo-site",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"#zeit/next-css": "^1.0.1",
"axios": "^0.21.1",
"classnames": "2.2.6",
"dotenv": "^10.0.0",
"file-loader": "^6.2.0",
"formik": "2.1.5",
"jquery": "3.5.1",
"lodash": "4.17.20",
"next": "11.0.0",
"next-absolute-url": "^1.2.2",
"next-compose-plugins": "^2.2.1",
"next-images": "^1.8.1",
"next-transpile-modules": "^8.0.0",
"normalize.css": "8.0.1",
"polished": "3.6.5",
"prop-types": "15.7.2",
"react": "17.0.2",
"react-animated-burgers": "1.2.8",
"react-collapse": "5.0.1",
"react-dom": "17.0.2",
"react-icons": "^4.2.0",
"react-is": "16.13.1",
"react-on-screen": "2.1.1",
"react-reveal": "1.2.2",
"react-scroll": "1.8.1",
"react-slick": "0.27.9",
"react-sticky-el": "2.0.5",
"react-string-replace": "0.4.4",
"react-use": "15.3.3",
"shortid": "2.2.15",
"slick-carousel": "1.8.1",
"styled-components": "^5.3.0",
"styled-media-query": "2.1.2",
"styled-system": "5.1.5",
"typewriter-effect": "^2.18.0",
"url-loader": "^4.1.1",
"webpack": "^5.39.1",
"yup": "0.29.3"
},
"devDependencies": {
"#types/react": "17.0.11",
"typescript": "4.3.2",
"webpack": "^5.23.0"
}
}
I found the solution after try fix other bug on the project. Basically, my project has two custom pages, _app.jsx and _document.jsx, but outside the /pages directory.
After read the documentation, could see this difference with the docs recomendation. Then i moved _app.jsx and _document.jsx to /pages folder and got the right solution.
I am using vueJS to build an authentication (login) page with Firebase, each time when I run: npm run serve I have the same error asking me to install Firebase: `Failed to compile with 7 errors 10:44:30 AM
These dependencies were not found:
#firebase in ./src/main.js
firebase in ./src/components/firebaseInit.js, ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/Login.vue and 3 others
firebase/firestore in ./src/components/firebaseInit.js`.
and asking me to install firebase doing: npm install --save #firebase firebase firebase/firestore. which I did many times, but still the same error.
Here is my package.JSON:
{
"name": "Project",
"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",
"predeploy": "npm run build",
"deploy": "gh-pages -d dist"
},
"dependencies": {
"firebase": "^7.13.1",
"node-pre-gyp": "^0.14.0",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"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",
"eventsource-polyfill": "^0.9.6",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"gh-pages": "^1.1.0",
"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"
]
}
node -v = 16.12.1
npm -v =6.14.4
Any idea ?
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 router from "./router";
import firebase from "#firebase";
import "./components/firebaseInit";
Vue.config.productionTip = false;
let app;
firebase.auth().onAuthStateChanged(function(user) {
if (!app) {
/* eslint-disable no-new */
app = new Vue({
el: "#app",
router,
template: "<App/>",
components: { App }
});
}
});
firebaseInit.js
import firebase from 'firebase';
import 'firebase/firestore';
import firebaseConfig from './firebaseConfig';
const firebaseApp = firebase.initializeApp(firebaseConfig);
export default firebaseApp.firestore();
I find it, just replace "firebase": "^7.13.1" by "firebase": "7.13.1". and it worked.
I don't know why, but it worked!
import { initializeApp } from 'firebase/app'
import { firebaseConfig } from './config'
initializeApp(firebaseConfig)
I am new to vuejs, I am getting following error:
Error:
[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <Anonymous>
<Vcinfo> at resources/assets/js/valuechain/Vcinfo.vue
<Root>
Vcinfo.vue
<template>
<div id="root">
<div class="navbar navbar-default">
<div class="navbar-brand">
<router-link to="/vc">VALUECHAIN</router-link>
</div>
<ul class="nav navbar-nav navbar-left">
<li><router-link to="/vc/setting_keywords">Keywords Setting</router-link></li>
<li><router-link to="/vc/keyword_search">Search Keywords</router-link></li>
</ul>
</div>
<router-view></router-view>
</div>
</template>
<style lang="css">
.navbar {
margin-top:15px;
}
</style>
vc.js
import Vue from 'vue'
import Vcinfo from './Vcinfo.vue'
import router from './router'
const app = new Vue({
el: '#vc',
components: { Vcinfo },
template: '<vcinfo></vcinfo>',
router
})
package.json
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"bootstrap-sass": "^3.3.7",
"gulp": "^3.9.1",
"jquery": "^3.1.0",
"laravel-elixir": "^6.0.0-14",
"laravel-elixir-vue-2": "^0.2.0",
"laravel-elixir-webpack-official": "^1.0.2",
"laravel-vue-pagination": "^1.0.6",
"lodash": "^4.16.2",
"moment": "^2.18.1",
"moment-timezone": "^0.4.1",
"vue": "^2.0.1",
"vue-js-toggle-button": "^1.1.2",
"vue-resource": "^1.0.3",
"vuejs-datepicker": "^0.9.6"
},
"dependencies": {
"axios": "^0.16.2",
"vee-validate": "^2.0.0-rc.8",
"vue-bootstrap-datetimepicker": "^3.0.0",
"vue-axios": "^2.0.2",
"vue-router": "^2.7.0",
"vue-template-compiler": "^2.4.2",
"vue2-datatable-component": "^1.1.7"
}
}
I am running above vuejs code inside laravel framework. Please suggest what is wrong ?
Somebody else had exactly the same problem, I wrote an explanation as to what this error means there:
https://stackoverflow.com/a/46320757/3122639
In your case, it looks like you are using an older build of laravel with elixir, which is now Laravel Mix, either way you need to make sure you are aliasing the runtime + compiler build in your webpack config. So, from the elixir docs it looks like you will need to create a file called webpack.conf.js file in the root of your project with the following:
module.exports = {
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js'
}
}
}
I would recommend using webpack 2 on it's own, rather than using elixir, which has been deprecated.