I start with the simple vue.js application. I have icons in base64 format and put all them as object in separately file icons.js. I want to import this object to the file globals.js as globals constant and use this constant in all places where I need icons. BUT, this file does not need to be bundled.
I have files icons.js, globals.js, main.js, App.vue.
icons.js:
export const iconsData =
{
"large": {
"2": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAA3CAYAAAD6+O8NAAAAGXRFWHRTb2Z0d2FyZQB",
"3": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwE",
"777": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAAAUCAYAAAAJD/ojAAAAGXRFWHRTb2Z0d2FyZQB"
},
"small": {
"2": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADsAAAARCAYAAABjEtTjAAAAGXRFWHRTb2Z0d2F",
"3": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADkAAAAqCAYAAAAJWvOwAAAAGXRFWHRTb2Z0d2Fy",
"777": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAqCAYAAADMKGkhAAAAGXRFWHRTb2Z0d2",
}
};
globals.js:
import { iconsData } from './assets/icons'
export const icons = {
getIcon: function (iconNumber) {
if (!iconsData.large[iconNumber]) {
return "";
} else {
return iconsData.large[iconNumber];
}
},
isIcon:function (iconNumber) {
return iconsData.large[iconNumber];
}
};
In my App.vue :
<template>
<div id="app">
<div v-for="channel in channels">
<div class="icon" >
<img v-if="icons.isIcon(channel.number)" :src="icons.getIcon(channel.number)" >
<div v-if="!icons.isIcon(channel.number)" class="channel-name">{{channel.name}}</div>
</div>
</div>
</div>
</template>
<script>
import {icons} from "./globals"
export default {
name: 'app',
components: {
},
data() {
return {
icons: icons,
}
},
}
</script>
I tried
1) Vue.js exclude settings file from being bundled - not work for me
2)Exclude json file from being bundled in Vue from official documentation my file is in assets, but if I put absolutely path in global.js
import { iconsData } from '/assets/icons' - application not compiled.
Maybe this not right - import icons as const global? What I can do to leave file icons.js separately?
I suppose you're using webpack to build as you've tagged the question with VueCLI. If you don't want the icon data to be bundled, then you need to include such hints to webpack that the icon data should reside in a separate chunk than your app bundle. Something like this should work:
const iconsData = import('./assets/icons').then(icons => icons.iconsData);
You can also customize what the chunk should be named. Let's say you want it to be named icons-data, then you can do this:
const iconsData = import(/* webpackChunkName: "icons-data" */ './assets/icons').then(icons => icons.iconsData);
solved the problem this way:
1) Delete from icons.js word export
const iconsData =
{
"large": {
"2": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAA3CAYAAAD6+O8NAAAAGXRFWHRTb2Z0d2FyZQB",
"3": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwE",
"777": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAAAUCAYAAAAJD/ojAAAAGXRFWHRTb2Z0d2FyZQB"
},
"small": {
"2": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADsAAAARCAYAAABjEtTjAAAAGXRFWHRTb2Z0d2F",
"3": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADkAAAAqCAYAAAAJWvOwAAAAGXRFWHRTb2Z0d2Fy",
"777": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAqCAYAAADMKGkhAAAAGXRFWHRTb2Z0d2",
}
};
2) Delete from globals.js import
export const icons = {
getIcon: function (iconNumber) {
if (!iconsData.large[iconNumber]) {
return "";
} else {
return iconsData.large[iconNumber];
}
},
isIcon:function (iconNumber) {
return iconsData.large[iconNumber];
}
};
3) Add to index.html referense to icons.js
<!DOCTYPE html>
<html lang="en">
<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="icon" href="<%= BASE_URL %>favicon.ico">
<title>Icons</title>
<script type="text/javascript" src="<%= BASE_URL %>icons.js"></script>
</head>
<body>
<noscript>
<strong>We're sorry but egg doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
4) Copy file icons.js to the public folder and to the src root
How I understand - this way exclude the file from webpack in "old school" way. How to do this with webpack - I do not understand.
Related
I'm trying to set up Vue3 so that I can use it via npm + webpack. For some reason the component does not get mounted and no error is shown. If I instead use unpkg it works. How can I make the npm + webpack option work?
I have "vue": "^3.1.5" in my package.json and the following webpack config:
module.exports = {
mode: 'production',
entry: {
provider: './src/components/provider.js',
requester: './src/components/requester.js',
},
optimization: {
minimize: false
},
output: {
path: `${__dirname}/../public`,
filename: '[name].js',
}
}
requester.js:
import { createApp } from 'vue'
createApp({
template: `
<div>
<div>
<h2>Números recibidos</h2>
{{ receivedNumbers }}
<ul>
<li v-for="n in receivedNumbers">{{ n }}</li>
</ul>
</div>
</div>
`,
data() {
return {
receivedNumbers: [1,2,3],
numberRequestIsOpen: false,
}
},
}).mount('#requester-component');
requester.html
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>requester</h1>
<div id="requester-component"></div>
<script src="requester.js"></script>
</body>
</html>
resulting html
<h1>requester</h1>
<div id="requester-component" data-v-app=""><!----></div>
<script src="requester.js"></script>
In the other hand, if I add <script src="https://unpkg.com/vue#next"></script> in the head tag of my html and change the js to:
Vue.createApp({
//
}).mount('#requester-component');
then the resulting html is
<h1>requester</h1>
<div id="requester-component" data-v-app=""><div><div><h2>Números recibidos</h2> [
1,
2,
3
] <ul><li>1</li><li>2</li><li>3</li></ul></div></div></div>
<script src="requester.js"></script>
which is the expected output.
Link to the repo in case it helps to play around. Last commit adds the unpkg has, and the previous one has the npm version
https://github.com/vuejs/vue-next/issues/4275
In order to use the functionality of the vue.js template, you need to load the finished package with the compiler and runtime, but vue.js by default loads the runtime only version, so you need to explicitly specify the version (vue.esm-bundler.js)
Adding
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm-bundler.js'
}
}
solved the issue.
I am getting a blank page for the vue3 app in laravel8. It was working separately with vue3 cli. Laravel8 and vue3 are correctly installed as I have checked their versions
Below are the source codes for relevant files:
welcome.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
</head>
<body>
<div id="app">
<vue-app />
</div>
</body>
</html>
index.js
import { createApp } from 'vue'
import App from './App.vue';
const app = createApp({});
app.component('vue-app', App)
.mount('#app');
require('./bootstrap');
App.vue
<template>
<div class="container">
<Header #toggle-add-task="toggleAddTask" title='Task Tracker' :showAddTask="showAddTask" />
<div v-show="showAddTask">
<AddTask #addTask="addTask" />
</div>
<Tasks #toggle-reminder="toggleReminder" #delete-task="deleteTask" :tasks="tasks" />
</div>
</template>
<script>
import Header from './components/Header'
import Tasks from './components/Tasks'
import AddTask from './components/AddTask'
export default {
name: 'App',
components: {
Header,
AddTask,
Tasks
},
data() {
return {
tasks: [],
showAddTask: false
}
},
methods: {
deleteTask(id) {
if(confirm('Are you sure'))
this.tasks = this.tasks.filter((task) => id!==task.id)
},
toggleReminder(id)
{
this.tasks = this.tasks.map((task) => id===task.id ? {...task, reminder: !task.reminder}:task)
},
addTask(task)
{
this.tasks = [...this.tasks, task];
},
toggleAddTask()
{
this.showAddTask = !this.showAddTask;
}
},
created() {
this.tasks = [
{
id: 1,
text: 'doctors Appointment',
day: 'March 1st at 2:30pm',
reminder: true,
},
{
id: 2,
text: 'Meeting Appointment',
day: 'March 1st at 2:30pm',
reminder: false,
},
{
id: 3,
text: 'School Appointment',
day: 'March 1st at 2:30pm',
reminder: true,
},
]
}
}
</script>
webpack.mix.js
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.vue()
.postCss('resources/css/app.css', 'public/css');
npm run dev and npm run watch work fine with no errors or warnings
I have also attached the folder structure in laravel from vscode
I don't think you need <vue-app /> component as your app is mounted on the element with the ID app. check you browser console to see exactly what is wrong.
I created a default Vue project with the Vue CLI, and got an embed code sent to my email for Font Awesome 5. I added that code to my project index.html in the public folder.
<head>
<script src="https://use.fontawesome.com/8e1c33adc2.js"></script>
</head>
I'm using this in a component template:
<i class="fas fa-trash"></i>
It just shows up as a box.
Do I have to do something special to get the embed code to work in my Vue component, like adding it to main.js?
I have had issues with font-awesome with vue. The solution for my problem was to use vue-fontawesome components.
For example, I used font-awesome the following way
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'
import { faAngleDown } from '#fortawesome/free-solid-svg-icons'
import { faAngleUp } from '#fortawesome/free-solid-svg-icons'
export default {
name: 'Timer',
props: {
msg: String
},
components:{
FontAwesomeIcon
},
data: function(){
return {
selected_interval: null,
intervalID: null,
buttonText: "Start",
isStart: true,
isStop: false,
toggleAngle: faAngleDown,
},
methods: {
dropdown_toggle: function(event) {
event.stopPropagation()
let dropdown = document.querySelector('#pomodoro-dropdown');
dropdown.classList.toggle("is-active")
if(this.toggleAngle == faAngleDown){
this.toggleAngle = faAngleUp
}
else{
this.toggleAngle = faAngleDown
}
}
}
and used the componenent-
<font-awesome-icon :icon="toggleAngle" />
hope this helps.
I got it working by logging into Font Awesome and using the free kit code from https://fontawesome.com/kits.
All I needed was this in the head section of index.html:
<head>
<script src="https://kit.fontawesome.com/[kit code].js" crossorigin="anonymous"></script>
</head>
you have to add the css file of font-awesome.you can open developer tools and see there is no class with the <i></i>
I have downloaded a vue.js template from the web. Whenever I build files via npm the title on the index.html keeps being swapped to the name of the template. Is there a way to change the default title?
As I understand your question - you need to configure your vue.config.js file something like this (pay attention on Webpack part) - these files are from working project, so you have maximum understanding on how it could look at the end:
module.exports = {
baseUrl: '/',
outputDir: (process.env.NODE_ENV === 'production' ? '../web/' : '../web/js/'),
indexPath: '../app/Resources/views/index.html.twig',
// Setting this to false can speed up production builds if you don't need source maps for production.
productionSourceMap: false,
// By default, generated static assets contains hashes in their filenames for better caching control.
// However, this requires the index HTML to be auto-generated by Vue CLI. If you cannot make use of the index HTML
// generated by Vue CLI, you can disable filename hashing by setting this option to false,
filenameHashing: false,
lintOnSave: false,
// https://cli.vuejs.org/ru/config/#devserver-proxy
devServer: {},
// https://cli.vuejs.org/ru/config/#chainwebpack
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].title = 'Ojok Deep Sales Platform';
args[0].template = './index.html.template';
return args;
})
}
};
And after you have updated your vue.config.js file, change your index.html template file to be like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title><%= htmlWebpackPlugin.options.title %></title>
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900' rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="../js/go.js"></script>
<script type="text/javascript" src="../js/momentjs.js"></script>
<script type="text/javascript" src="../js/webphone/flashphoner.js"></script>
<script type="text/javascript" src="../js/webphone/SoundControl.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
Pay attention on what is being included in <title>-tag:
<title><%= htmlWebpackPlugin.options.title %></title>
After generating new index.html file your title should be set to whatever you have written into args[0].title option.
Hope this helps.
I'm still new at VueJS, but here were my findings. I'd love any suggested options or improvements. I went with option #2.
Option 1: set for Multiple Pages mode
vue.config.js
module.exports = {
pages: {
index: {
entry: 'src/main.js',
// template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
title: 'My Website Title',
},
}
}
Option 2: titleMixin (referenced from https://medium.com/#Taha_Shashtari/the-easy-way-to-change-page-title-in-vue-6caf05006863)
titleMixin.js added to mixins folder
function getTitle (vm) {
const { title } = vm.$options
if (title) {
return typeof title === 'function'
? title.call(vm)
: title
}
}
export default {
created () {
const title = getTitle(this)
if (title) {
document.title = title
}
}
}
added to main.js
import titleMixin from './mixins/titleMixin'
Vue.mixin(titleMixin)
Use in Component Pages
<script>
export default {
title: 'Foo Page'
}
</script>
Use in Vue instance with a function
<script>
export default {
title () {
return `Foo Page — ${this.someValue}`
},
data () {
return {
someValue: 'bar'
}
}
}
</script>
Option 1:
Edit your /public/index.html and replace this:
<title><%= htmlWebpackPlugin.options.title %></title>
with this:
<title>Your Title Here</title>
Option 2:
vue.config.js
module.exports = {
chainWebpack: config => {
config.plugin('html').tap(args => {
args[0].title = 'Your Title Here';
return args;
});
}
}
/public/index.html
<title><%= htmlWebpackPlugin.options.title %></title>
Note: Can we write vue.js large application without using any compiler for code like currently i see all example use webpack now to make vue.js code compatible for browser .
I want make vue.js application without webpack and without using .vue extension. Is it possible? if it is possible, can you provide a link or give sample how to use routing in that case.
As we make component in .vue extension can be make component in .js extension and use application as we do in angular 1 where we can make whole app without any trans-compiler to convert the code.
Can be done that in html , css , js file only and no webpack sort of thing.
What i have done .
index.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vueapp01</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
main.js this file added in webpack load time
// 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'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
Hello route
Helloworld route
{{route}}
<router-view/>
<!-- <hello></hello> -->
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
route : "This is main page"
}
}
}
</script>
router
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '#/components/HelloWorld'
import Hello from '../components/Hello'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/hello',
name: 'Hello',
component: Hello
}
]
})
I have done something like this . Can we do this by just html , css , js file only with not webpack to compile code . Like we do in angular 1 .
Thanks
As stated in this jsFiddle: http://jsfiddle.net/posva/wtpuevc6/ , you have no obligation to use webpack or .vue files.
The code below is not from me and all credit goes to this jsFiddle creator:
Create an index.html file:
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>
<script src="/js/Home.js"></script>
<script src="/js/Foo.js"></script>
<script src="/js/router.js"></script>
<script src="/js/index.js"></script>
<div id="app">
<router-link to="/">/home</router-link>
<router-link to="/foo">/foo</router-link>
<router-view></router-view>
</div>
Home.js
const Home = { template: '<div>Home</div>' }
Foo.js
const Foo = { template: '<div>Foo</div>' }
router.js
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/', component: Home },
{ path: '/foo', component: Foo }
]
})
index.js
new Vue({
router,
el: '#app',
data: {
msg: 'Hello World'
}
})
Appreciate the framework...
Just a sidenote: .vue files are really awesome, you should definitely try them if not using them is not a requirement
I have started learning vue.js also and I am not familiar with webpack and stuff and I also wanted to still separate and use .vue files as it makes management and code cleaner.
I have found this library:
https://github.com/FranckFreiburger/http-vue-loader
and a sample project using it:
https://github.com/kafkaca/vue-without-webpack
I am using it and it seems to work fine.
You perfectly can, but with a lot of disadvantages. For example: you cannot easily use any preprocessor, like Sass or Less; or TypeScript or transpile source code with Babel.
If you don't need support for older browser, you can use ES6 modules today. Almost all browsers support it. See: ES6-Module.
But Firefox doesn't support dynamic import(). Only Firefox 66 (Nightly) support it and need to be enabled.
And if that wasn't enough, your web application will not be indexed. It's bad for SEO.
For example, Googlebot can craw and index Javascript code but still uses older Chrome 41 for rendering, and it's version don't support ES6 modules.
If that are not disadvantages for you, then you can do this:
Remove any thirty party library import like Vue, VueRouter, etc. And include those in the index.html file using script tags. All global variables are accesible in all es6 modules. For example, remove this line from main.js and all .vue files:
import Vue from 'vue';
And add this line in your index.html:
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
Rewrite all .vue files and change file extension to .js. For example, rewrite something like this:
<template>
<div id="home-page">
{{msg}}
</div>
</template>
<script>
export default {
data: function() {
return { msg: 'Put home page content here' };
}
}
</script>
<style>
#home-page {
color: blue;
}
</style>
to something like this:
let isMounted = false; /* Prevent duplicated styles in head tag */
export default {
template: `
<div id="home-page"> /* Put an "id" or "class" attribute to the root element of the component. Its important for styling. You can not use "scoped" attribute because there isn't a style tag. */
{{msg}}
</div>`,
mounted: function () {
if (!isMounted) {
let styleElem = document.createElement('style');
styleElem.textContent = `
#home-page {
color: blue;
}
`;
document.head.appendChild(styleElem);
isMounted = true;
}
},
data: function () {
return {
msg: 'Put home page content here'
};
}
}
It is all. I put an example in this link
P.S. Text editing without syntax highlighting can be frustrating. If you use Visual Studio Code you can install Template Literal Editor extension. It allows editing literal strings with syntax highlight. For styles select CSS syntax, and for templates HTML syntax. Unknown tag in HTML are highlighted differently. For solve this, change the color theme. For example, install Brackets Dark Pro color theme or any theme do you like.
Regards!
For sure you can. We did a project with Vue, and we had couple of problems during compiling .vue files.
So we switched to structure with three separate files.
But be aware that you need webpack anyway. The idea of Vue was to split huge projects into components, so using template inside .js file it's pretty normal.
So take a look at
html-loader
And
css-loader
Using these modules you can write something like this:
component.js
// For importing `css`. Read more in documentation above
import './component.css'
// For importing `html`. Read more in documentation above
const templateHtml = require('./component.html')
export default {
name: 'ComponentName',
components: { /* your components */ },
mixins: [/* your mixins */ ],
template: templateHtml,
computed: .....
}
component.css
#header {
color: red
}
component.html
<div id="header"></div>
BUT
You need to know that HTML file should be written in the same way as I you will have it in template property.
Also, take a look at this repo, maybe you will find something useful here
Vue-html-loader. It is a fork from html-loader by Vue core team.
In vuejs 3 you you can do it in an ES6 modular fashion (no webpack or other tools required):
index.html
<!DOCTYPE html>
<html>
<head>
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue#3.0.11/dist/vue.esm-browser.js",
"vue-router": "https://unpkg.com/vue-router#4.0.5/dist/vue-router.esm-browser.js",
"html" : "/utils/html.js"
}
}
</script>
<script src="/main.js" type="module"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
main.js
import { createApp, h } from 'vue';
import {createRouter, createWebHashHistory} from 'vue-router';
import App from './components/App.js';
const routes = [//each import will be loaded when route is active
{ path: '/', component: ()=>import('./components/Home.js') },
{ path: '/about', component: ()=>import('./components/About.js') },
]
const router = createRouter({
history: createWebHashHistory(),
routes,
})
const app = createApp({
render: () => h(App),
});
app.use(router);
app.mount(`#app`);
components/App.js
import html from 'html';
export default {
name: `App`,
template: html`
<router-link to="/">Go to Home</router-link>
<router-link to="/about">Go to About</router-link>
<router-view></router-view>
`};
components/Home.js
import html from 'html';
export default {
template: html`
<div>Home</div>
`};
components/About.js
import html from 'html';
export default {
template: html`
<div>About</div>
`};
utils/html.js
// html`..` will render the same as `..`
// We just want to be able to add html in front of string literals to enable
// highlighting using lit-html vscode plugin.
export default function () {
arguments[0] = { raw: arguments[0] };
return String.raw(...arguments);
}
Notes:
Currently (04/2021) importmap works only on chrome (firefox in progress). To make the code compatible with other browsers also, just import (on each .js file) the dependencies directly from the urls. In this case though vue-router.esm-browser.js still imports 'vue', so you should serve an updated version of it, replacing import { .... } from 'vue' with import { .... } from 'https://unpkg.com/vue#3.0.11/dist/vue.esm-browser.js'
To avoid waterfall loading effect, you can add <link rel="modulepreload" href="[module-name]"> entries to index.html to start preloading some or all modules asynchronously before you need them.
A Related article
Vue can be included on a single html page quite simply:
Vue 3 minimal example:
<script src="https://unpkg.com/vue#3/dist/vue.global.js"></script>
<div id="app">{{ message }}</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>
Vue 2 minimal example, with Vuetify
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-main>
<v-container>Hello world</v-container>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
</script>
</body>
</html>
vue 2 guides:
https://v2.vuejs.org/v2/guide/installation.html#CDN
https://vuetifyjs.com/en/getting-started/installation/#usage-with-cdn
vue 3 guide: https://v2.vuejs.org/v2/guide/installation.html#CDN