Skip to content

Instantly share code, notes, and snippets.

View AnandShiva's full-sized avatar

AnandShiva

2 followers · 23 following
View GitHub Profile
@AnandShiva
AnandShiva / button.vue
Last active June 21, 2020 11:04
Button.vue example component
// src/components/button.vue eg
<template>
<button class="button" @click="buttonClicked">{{text}}</button>
</template>
<script>
export default {
props:{
text:{
type: String,
@AnandShiva
AnandShiva / main.js
Created June 20, 2020 11:50
code sample to updated in /src/main.js
// code sample to updated in /src/main.js
import Button from './components/Button.vue';
const components = {
myButton: Button
}
export default components
@AnandShiva
AnandShiva / App.vue
Created July 6, 2020 11:33
Importing and registering a component in sample consumption project
<template>
<div id="app">
<my-button text='Hello Vue Expert !'>
</my-button>
</div>
</template>
<script>
// const libCss = require('vue-library-demo-medium/dist/cssfile.css')
import vueLibrary from 'vue-library-demo-medium';
@AnandShiva
AnandShiva / manifest.json
Last active September 13, 2020 15:32
Vue Extension Medium Example
{
"manifest_version": 2,
"name": "Vue Extension",
"version": "1.0.0",
"description": "This is a sample description",
"short_name": "Short Sample Name",
"permissions": ["activeTab", "declarativeContent", "storage", "<all_urls>"],
"chrome_url_overrides" : {
"newtab": "newTab.html"
},
@AnandShiva
AnandShiva / newTab.html
Last active September 13, 2020 15:00
Vue Extension medium example - newTab.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="vue_container">
<h1>This is a Heading</h1>
@AnandShiva
AnandShiva / webpack.config.js
Last active September 13, 2020 11:54
Vue Extension medium example - webpack.config.js
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
const ExtensionReloader = require('webpack-extension-reloader');
module.exports = {
context: path.resolve(__dirname, 'src'),
entry: {
'newTab': './newTab.js',
'background': './background.js'
},
@AnandShiva
AnandShiva / newTab.js
Created September 13, 2020 14:29
import Vue from 'vue';
const ExtensionContainer = require('./Index.vue').default;
window.vueInstance = new Vue({
el: `#vue_container`,
render: (h) => h(ExtensionContainer),
});
@AnandShiva
AnandShiva / index.vue
Created September 13, 2020 15:09
Vue Extension medium example - Index.vue
<template>
<div id="extension_content">
Vue Content
</div>
</template>
<script>
export default {
created(){
console.log('Vue Component Initialised')
@AnandShiva
AnandShiva / webpack.config.js
Last active September 14, 2020 09:14
Vue Enabled webpack.js
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
const ExtensionReloader = require('webpack-extension-reloader');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
context: path.resolve(__dirname, 'src'),
entry: {
@AnandShiva
AnandShiva / package.json
Created September 14, 2020 11:27
Vue Extension - Final package.json with dependencies
{
"name": "vue-extension-medium-blog",
"version": "1.0.0",
"main": "index.js",
"repository": "https://github.com/AnandShiva/vue-extension-medium-blog.git",
"author": "Anand Kumar <anandkumar.shiva@gmail.com>",
"license": "MIT",
"scripts": {
"build": "webpack --mode='development' --watch"
},