I'm using Vue 2.0 standalone and i have a problem with components with Slot. Always render default value inside slot. Never render content inside custom component
package.json
{
"name": "web-components",
"description": "A Vue.js project",
"author": "",
"private": true,
"scripts": {
"watchify": "watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js",
"serve": "http-server -o -c 1 -a localhost",
"dev": "npm-run-all --parallel watchify serve",
"lint": "eslint --ext .js,.vue src test/unit",
"test": "karma start karma.conf.js",
"build": "cross-env NODE_ENV=production browserify -g envify -p [ vueify/plugins/extract-css -o dist/build.css ] -e src/main.js | uglifyjs -c warnings=false -m > dist/build.js"
},
"browserify": {
"transform": [
"vueify",
"babelify"
]
},
"aliasify": {
"aliases": {
"vue": "vue/dist/vue"
}
},
"dependencies": {
"vue": "^2.0.1"
},
"devDependencies": {
"aliasify": "^2.0.0",
"babel-core": "^6.0.0",
"babel-plugin-transform-runtime": "^6.0.0",
"babel-preset-es2015": "^6.0.0",
"babel-preset-stage-2": "^6.0.0",
"babel-runtime": "^6.0.0",
"babelify": "^7.2.0",
"browserify": "^13.1.0",
"browserify-hmr": "^0.3.1",
"cross-env": "^2.0.0",
"envify": "^3.4.1",
"eslint": "^3.3.0",
"eslint-config-standard": "^5.3.5",
"eslint-plugin-html": "^1.5.2",
"eslint-plugin-promise": "^2.0.1",
"eslint-plugin-standard": "^2.0.0",
"http-server": "^0.9.0",
"jasmine-core": "^2.4.1",
"karma": "^1.2.0",
"karma-browserify": "^5.1.0",
"karma-jasmine": "^1.0.2",
"karma-phantomjs-launcher": "^1.0.0",
"karma-spec-reporter": "0.0.26",
"npm-run-all": "^2.3.0",
"phantomjs-prebuilt": "^2.1.3",
"proxyquireify": "^3.0.1",
"uglify-js": "^2.5.0",
"vueify": "^9.0.0",
"watchify": "^3.4.0"
}
}
main.js
//this show Failed to mount component: template or render function not defined.
//import Vue from 'vue/dist/vue'
import Vue from 'vue'
import Hello from './components/Hello.vue'
Vue.component('Hello',Hello)
new Vue({ // eslint-disable-line no-new
el: '#app'
});
Hello.vue
<template>
<div id="hello">
<h1>{{ msg }}</h1>
<slot>defect</slot>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>web-components</title>
<link rel="stylesheet" href="dist/build.css">
</head>
<body>
<div id="app">
<hello><label>change value</label></hello>
</div>
<script src="dist/build.js"></script>
</body>
</html>
EDIT: If i use npm run build instead of nrpm run dev. This work fine.
It's likely you're using the "runtime-only" build. If you're using that then all your templates must be in Vue files. Since your app's template is in the index.html it won't work. So either put your apps template into a Vue file and render that or use the "Runtime + Compiler" build. You can read more about that here: http://vuejs.org/guide/installation.html#Standalone-vs-Runtime-only-Build
Related
I'm working on a legacy Vue 2 website with Vue CLI,
here's the packages.json:
{
"name": "vue-package",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-router": "^3.5.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~5.0.8",
"#vue/cli-service": "~5.0.8",
"vue-template-compiler": "^2.6.11",
"sass-loader": "^8.0.2",
"sass": "^1.26.5"
}
}
The body of public/index.html:
<body>
<div id="app"></div>
<script src="/src/main.js"></script>
</body>
The file src/main.js exists in the project, but when I started the app with npm run start but got GET http://localhost:8080/src/main.js 404 (Not Found) in the console.
I'm not familiar with Vue 2 / Vue CLI, and wasn't the author of the website.
When using Vue 3 with Vite, <script src="/src/main.js"></script> just work - how do I make this work with Vue 2 with Vue CLI?
I have done everything in accordance with the docs.
I installed storybook, and then I changed the config file the way they say has to be done to make storybook work on Vite, which supports the element-plus library.
.storybook/main.js:
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.#(js|jsx|ts|tsx)'],
addons: ['#storybook/addon-links', '#storybook/addon-essentials'],
core: {
builder: '#storybook/builder-vite', // 👈 The builder enabled here.
},
}
Package.json:
{
"name": "elementui-practice",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview --port 4173",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"dependencies": {
"element-plus": "^2.2.17",
"node-sass": "^7.0.3",
"sass-loader": "^13.0.2",
"vue": "^3.2.38"
},
"devDependencies": {
"#babel/core": "^7.19.1",
"#storybook/addon-actions": "^6.5.12",
"#storybook/addon-essentials": "^6.5.12",
"#storybook/addon-interactions": "^6.5.12",
"#storybook/addon-links": "^6.5.12",
"#storybook/builder-vite": "^0.2.2",
"#storybook/testing-library": "^0.0.13",
"#storybook/vue3": "^6.5.12",
"#vitejs/plugin-vue": "^3.0.3",
"babel-loader": "^8.2.5",
"eslint": "^8.23.1",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-storybook": "^0.6.4",
"eslint-plugin-vue": "^9.5.1",
"sass": "^1.55.0",
"vite": "^3.0.9",
"vue-cli-plugin-storybook": "~2.1.0",
"vue-loader": "^16.8.3"
}
}
If I run only the element-plus (npm run dev), the library works.
If I run npm run storybook, element-plus styles are not applied to the components or elements. Normal css works, but element-plus components and styles do not work.
Add these code to storybook's preview.js
import { app } from '#storybook/vue3'; //I use Vue3
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
app.use(ElementPlus);
I have configured sass using this link https://cli.vuejs.org/guide/css.html#referencing-assets
Installed npm install -D sass-loader sass
created variables.scss under src
src/variables.scss
$primary: red;
created and configured vue.config.js in root folder
project-folder/vue.config.js
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `#import "~#/variables.sass"`,
},
},
},
};
now, in below vue file I am trying to access variable declared in variables.scss file. But this is throwing error '$primary' is not defined.
src/components/HelloWorld.vue
<template>
<div>
<h1>Hello world</h1>
</div>
</template>
<script>
export default {
mounted(){
console.log('mounted',$primary) // error: '$primary' is not defined, how to fix this ?
}
}
</script>
How to use $primary in HelloWorld.vue file methods in mounted or any other functions in a .vue file ?
here is my package.json
package.json
{
"name": "sass-vue",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.4",
"vue": "^2.6.11"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.3.0",
"#vue/cli-plugin-eslint": "~4.3.0",
"#vue/cli-service": "~4.3.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11"
}
}
According to docs you should be able to access variable in style tags not in javascript.
<template>
<div>
<h1>Hello world</h1>
</div>
</template>
<script>
export default {
mounted(){
}
}
</script>
<style lang="scss">
div h1 {
background-color: $primary;
}
</style>
When including a Sass file (in node_modules) in my Vue component <style> tag, the file is located, but any relative modules to that file are not. Everything seems configured correctly, but I'm obviously missing something. What gives?
I've tried installing/uninstalling various Webpack loaders (including css-loader), deleted and reinstalled node_modules, tried various PostCSS configurations, but nothing has made any progress so far.
Thanks in advance.
Vue component (IconicIcon.vue):
<template>
<div>
<span class="oi oi-icon-name" :title="icon" aria-hidden="true"></span>
</div>
</template>
<script>
export default {
name: "iconic-icon",
props: {
icon: String
}
};
</script>
<style scoped lang="scss">
$icon-font-path: "~open-iconic/font/css/fonts";
#import "~open-iconic/font/css/open-iconic-bootstrap.scss";
</style>
open-iconic-bootstrap.scss:
/* Bootstrap */
/* Override Bootstrap default variable */
$icon-font-path: '../fonts/' !default;
#font-face {
font-family: 'Icons';
src: url('#{$icon-font-path}open-iconic.eot');
src: url('#{$icon-font-path}open-iconic.eot?#iconic-sm') format('embedded-opentype'), url('#{$icon-font-path}open-iconic.woff') format('woff'), url('#{$icon-font-path}open-iconic.ttf') format('truetype'), url('#{$icon-font-path}open-iconic.svg#iconic-sm') format('svg');
font-weight: normal;
font-style: normal;
}
... (snip)
relevant file structure:
root/
src/
components/
IconicIcon.vue
node_modules/
open-iconic/
font/
css/
open-iconic-bootstrap.scss
fonts/
open-iconic.eot
open-iconic.otf
open-iconic.svg
open-iconic.ttf
open-iconic.woff
error:
WAIT Compiling... 8:37:49 PM
98% after emitting CopyPlugin
ERROR Failed to compile with 4 errors 8:37:50 PM
These relative modules were not found:
* ../fonts/open-iconic.eot in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePost
Loader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules
/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/IconicIcon.vue?vue&type=style&
index=0&id=468ee29c&scoped=true&lang=scss&
* ../fonts/open-iconic.svg in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePost
Loader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules
/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/IconicIcon.vue?vue&type=style&
index=0&id=468ee29c&scoped=true&lang=scss&
* ../fonts/open-iconic.ttf in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePost
Loader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules
/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/IconicIcon.vue?vue&type=style&
index=0&id=468ee29c&scoped=true&lang=scss&
* ../fonts/open-iconic.woff in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePos
tLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_module
s/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/IconicIcon.vue?vue&type=style
&index=0&id=468ee29c&scoped=true&lang=scss&
package.json:
{
"name": "myapp",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "concurrently -r -k -n doc,nod,vue -c magenta,green,cyan \"docker-compose up\" \"nodemon server/app.js\" \"vue-cli-service serve\"",
"build": "vue-cli-service build",
"start": "node server/app.js",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e"
},
"dependencies": {
"apollo-server": "^2.9.15",
"babel-loader": "^8.0.6",
"bootstrap": "^4.4.1",
"core-js": "^3.4.3",
"eslint": "^6.8.0",
"graphql": "^14.5.8",
"graphql-type-json": "^0.2.1",
"jquery": "^3.4.1",
"js-yaml-loader": "^1.2.2",
"leaflet": "^1.6.0",
"lowdb": "^1.0.0",
"mkdirp": "^0.5.1",
"mongodb": "^3.4.1",
"open-iconic": "^1.1.1",
"popper.js": "^1.16.0",
"shortid": "^2.2.8",
"slugify": "^1.3.6",
"vue": "^2.6.10",
"vue-router": "^3.1.3",
"vuex": "^3.1.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.1.0",
"#vue/cli-plugin-e2e-cypress": "^4.1.0",
"#vue/cli-plugin-router": "^4.1.0",
"#vue/cli-plugin-unit-jest": "^4.1.0",
"#vue/cli-plugin-vuex": "^4.1.0",
"#vue/cli-service": "^4.1.0",
"#vue/test-utils": "1.0.0-beta.29",
"concurrently": "^5.0.2",
"graphql-tag": "^2.9.0",
"node-sass": "^4.12.0",
"sass-loader": "^8.0.0",
"vue-template-compiler": "^2.6.10"
},
"browserslist": [
"> 1%",
"last 2 versions"
],
"jest": {
"preset": "#vue/cli-plugin-unit-jest"
}
}
I solved this by just using the CSS, instead of the Sass. Seems like a copout, but I've spent too much time on this already.
<template>
<div>
<span class="oi" :title="icon" aria-hidden="true" :class="`oi-${icon}`"></span>
</div>
</template>
<script>
export default {
name: "iconic-icon",
props: {
icon: String
}
};
</script>
<style scoped lang="scss">
#import "~open-iconic/font/css/open-iconic-bootstrap.css";
</style>
This kind of issues could be related to the way that the saas loader works.
I've encountered the same problem in one of my projects and resolved it by moving the font directory to the assets folder.
If you google for this you will find that other found the same solution as I am posting here.
In your case you should change the $icon-font-path variable to the following:
$icon-font-path: '/assets/fonts/' !default;
It will work!
I'm having difficulty updating an existing project with Vuetify 2.0.4. I'm fairly sure I'm initializing Vuetify correctly - when I refreshed my app I noticed that breaking changes in Vuetify (e.g. round vs rounded) were being picked up, but once I'd fixed those, all I was left with was an unstyled app with error messages of the form
[Vue warn]: Unknown custom element: <v-app> - did you register the component correctly?
for every Vuetify tag () in my code.
I'm wondering if my problem lies with my attempt to parse .sass files (in webpack.mix.js), but bottom line, I'm totally lost in space here and would appreciate some direction.
Thanks, Tom.
app.js
require('./bootstrap');
import i18n from './i18n.js';
import Vue from 'vue';
import Vuetify from 'vuetify/lib'
import router from './routes.js';
import { store } from './store/store.js';
import VueUtils from './plugins/vue-utils.js';
Vue.prototype.$http = axios;
import Exception from './helpers/Exception'
window.Exception = Exception;
import App from "./components/App.vue";
import Navbar from './components/nav/NavBar.vue';
import Footer from './components/nav/Footer.vue';
import SwitchLanguage from './components/tools/SwitchLanguage.vue';
import SocialMedia from './components/tools/SocialMedia.vue';
import ReturnButton from './components/tools/ReturnButton.vue';
import RelistButton from './components/tools/RelistButton.vue';
import WarningNotification from './components/tools/WarningNotification.vue';
import QuestionButton from './components/tools/QuestionButton.vue';
import Vuelidate from 'vuelidate';
Vue.config.productionTip = true;
Vue.use(VueUtils);
Vue.use(Vuelidate);
Vue.use(require('vue-moment'));
const vuetifyOptions = {
theme: {
dark: true,
}
};
Vue.use(Vuetify);
Vue.component('my-navbar', Navbar);
Vue.component('my-footer', Footer);
Vue.component('switch-language', SwitchLanguage);
Vue.component('social-media', SocialMedia);
Vue.component('return-button', ReturnButton);
Vue.component('relist-button', RelistButton);
Vue.component('warning-notification', WarningNotification);
Vue.component('question-button', QuestionButton);
export const eventBus = new Vue();
new Vue({
store,
i18n,
router,
vuetify: new Vuetify(vuetifyOptions),
render: h => h(App)
}).$mount("#app");
package.json
{
"name": "herdingcats",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"wrkbox": "workbox injectManifest && npm run dev"
},
"dependencies": {
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"caniuse-lite": "^1.0.30000985",
"connect-history-api-fallback": "^1.6.0",
"core-js": "^3.1.4",
"css-loader": "^3.1.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"html2plaintext": "^2.1.2",
"idb": "^4.0.4",
"laravel-echo": "^1.5.4",
"libphonenumber-js": "^1.7.21",
"lodash.uniq": "^4.5.0",
"material-design-icons-iconfont": "^5.0.1",
"popper": "^1.0.1",
"pusher-js": "^5.0.0",
"register-service-worker": "^1.6.2",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vue-faq-accordion": "^1.2.1",
"vue-i18n": "^8.12.0",
"vue-moment": "^4.0.0",
"vue-router": "^3.0.7",
"vue-socialmedia-share": "^1.0.1",
"vue-tel-input": "^2.5.0",
"vuelidate": "^0.7.4",
"vuetify": "^2.0.3",
"vuetify-loader": "^1.3.0",
"vuex": "^3.1.1",
"vuex-i18n": "^1.11.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.9.2",
"#vue/cli-plugin-eslint": "^3.9.2",
"#vue/cli-plugin-pwa": "^3.9.0",
"#vue/cli-service": "^3.9.3",
"axios": "^0.19.0",
"babel-eslint": "^10.0.2",
"bootstrap": "^4.3.1",
"cross-env": "^5.2",
"deepmerge": "^4.0.0",
"eslint": "^6.1.0",
"eslint-plugin-vue": "^5.2.3",
"eslint-plugin-vuetify": "^1.0.0-beta.3",
"fibers": "^4.0.1",
"friendly-errors-webpack-plugin": "~1.7",
"jquery": "^3.4",
"laravel-mix": "^4.1.2",
"mini-css-extract-plugin": "^0.8.0",
"popper.js": "^1.15",
"raw-loader": "^3.1.0",
"resolve-url-loader": "^3.1.0",
"sass": "^1.22.9",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"vue": "^2.6.10",
"vue-cli-plugin-vuetify": "^0.6.1",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.37.0",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2",
"workbox-cli": "^4.3.1"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
vue.config.js
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
module.exports = {
runtimeCompiler: true,
configureWebpack: {
plugins: [
new VuetifyLoaderPlugin()
],
rules: [
{
test: /\.s(c|a)ss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
implementation: require('sass'),
fiber: require('fibers'),
indentedSyntax: true // optional
}
}
]
}
]
},
};
webpack.mix.js
let mix = require('laravel-mix');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//mix.js('resources/js/app.js', 'dist/').sass('resources/sass/app.scss', 'dist/');
mix.js('resources/js/app.js', 'public/js').sass('resources/sass/app.scss', 'public/css');
mix.webpackConfig({
plugins: [
//new BundleAnalyzerPlugin(),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
],
// module: {
// rules: [{
// test: /\.scss$/,
// use: [
// //fallback to style-loader in development
// process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,
// "css-loader",
// "sass-loader"
// // {
// // loader: 'sass-loader',
// // options: {
// // implementation: require('sass'),
// // fiber: require('fibers'),
// // }
// // }
// ]
// }]
// },
}
);
app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="apple-touch-icon" sizes="57x57" href="images/apple-icon-57x57.png"> ...
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
<link rel="manifest" href="./manifest.json">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="SafeVegetables">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="images/mstile-144x144.png">
<meta name="theme-color" content="#9CCC65">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>XXXX</title>
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900' rel="stylesheet">
<script type='text/javascript'>
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>
</script>
</head>
<body>
<noscript>
<p>We're sorry but this site doesn't work properly without JavaScript enabled. Please enable it to continue.</p>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
<script>
let newWorker;
function showUpdateBar() {
let snackbar = document.getElementById('snackbar');
snackbar.className = 'show';
};
// The click event on the pop up notification
document.getElementById('reload').addEventListener('click', function(){
newWorker.postMessage({ action: 'skipWaiting' });
});
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('sw.js')
.then(registration => {
console.log(`Service Worker was registered! Scope: ${registration.scope}`);
})
.catch(err => {
console.log(`Service Worker registration failed: ${err}`);
});
});
}
</script>
</body>
</html>